当条形图太小时,谷歌图表不显示条形图外的标签。

问题描述 投票:1回答:1

我想让我的谷歌条形图在条形图外显示条形图标签,当标签太大而无法放入条形图内时。看起来这应该是默认的行为,但我的图表并没有这样做。下面是代码渲染时的问题截图。你可以在第2,3,5,7和8行看到这个问题。

Bar Labels not outside of bar

这是我的代码。

// START Disease Resistance
function disease() {
  var data = google.visualization.arrayToDataTable([
    ['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],

    ['Barley Yellow Dwarf', 5, '5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
    ['Fusarium Head Blight', 1, '9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
    ['Hessian Fly', 1, '9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
    ['Leaf Rust', 2, '8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
    ['Powdery Mildew', 1, '9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
    ['Soil-Borne Mosaic', 4, '6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
    ['Stem Rust', 1, '9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
    ['Stripe Rust', 1, '9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
    ['Tan Spot', 5, '5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
    ['Wheat Streak Mosaic', 5, '5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],

  ]);
  var paddingHeight = 80;
  var rowHeight = data.getNumberOfRows() * 80;
  var chartHeight = rowHeight + paddingHeight;

  var options = {
      'backgroundColor': 'transparent',
    annotations: {textStyle: {fontSize: 16, fontName: 'Source Sans Pro'}},
    legend: { position: 'none'},
    height: chartHeight,
    colors: ['#F4AA00'],
    chartArea: {
      width: '100%',
      height: rowHeight
    },
    hAxis: {
        ticks: [{v:1, f:'9'}, {v:2, f:'8'}, {v:3, f:'7'}, {v:4, f:'6'}, {v:5, f:'5'}, {v:6, f:'4'}, {v:7, f:'3'}, {v:8, f:'2'}, {v:9, f:'1'}, {v:10, f:'0'}],
      title: '7-9 Susceptible | 4-6 Intermediate | 1-3 Resistant',
        viewWindow: {
        min: 0,
        max: 10
    },
      minValue: 0,
      textStyle: {
        fontName: 'Source Sans Pro',
          bold: true,
        fontSize: 12,
        color: '#4d4d4d'
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
          bold: true,
        fontSize: 14,
        color: '#4d4d4d'
      }
    },
    vAxis: {
        textPosition: 'in',
      title: 'Disease',
      textStyle: {
        fontName: 'Source Sans Pro',
          fontSize: 14,
        bold: false,
        color: '#fff'
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
          fontSize: 14,
        bold: true,
        color: '#848484'
      }
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('disease'));
  chart.draw(data, options);

    // redraw charts responsively
    (function($) {
        function resizeCharts () {
        chart.draw(data, options);
        }
        $(window).resize(resizeCharts);
    })( jQuery );
}
// END Disease Resistance

谢谢!

javascript charts google-visualization
1个回答
1
投票

很明显,下面的选项不能很好地工作......

vAxis.textPosition: 'in'

唯一一个其他的选项可能就够了...

theme: 'maximized'

这意味着一半的文本将在蓝色背景上,其余的在白色背景上。好的但同时也与注解重叠。

我想出的唯一其他选项是将标签添加到注释中,并从y轴上删除。

这样做的结果和上面的一样,但是防止了与注解的重叠。

文本被放置在条形图的末尾,而不是起始位置。'ready' 但在任何交互活动中,如 "鼠标悬停 "时,图表会将它们移回。MutationObserver 以保持它们的位置,在酒吧的开始。

请看下面的工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(disease);

function disease() {
  var data = google.visualization.arrayToDataTable([
    ['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],

    ['', 5, 'Barley Yellow Dwarf: 5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
    ['', 1, 'Fusarium Head Blight: 9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
    ['', 1, 'Hessian Fly: 9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
    ['', 2, 'Leaf Rust: 8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
    ['', 1, 'Powdery Mildew: 9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
    ['', 4, 'Soil-Borne Mosaic: 6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
    ['', 1, 'Stem Rust: 9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
    ['', 1, 'Stripe Rust: 9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
    ['', 5, 'Tan Spot: 5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
    ['', 5, 'Wheat Streak Mosaic: 5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],

  ]);
  var paddingHeight = 80;
  var rowHeight = data.getNumberOfRows() * 80;
  var chartHeight = rowHeight + paddingHeight;

  var options = {
    backgroundColor: 'transparent',
    annotations: {textStyle: {fontSize: 16, fontName: 'Source Sans Pro'}},
    legend: {position: 'none'},
    height: chartHeight,
    colors: ['#F4AA00'],
    chartArea: {
      width: '100%',
      height: rowHeight
    },
    hAxis: {
      ticks: [{v:1, f:'9'}, {v:2, f:'8'}, {v:3, f:'7'}, {v:4, f:'6'}, {v:5, f:'5'}, {v:6, f:'4'}, {v:7, f:'3'}, {v:8, f:'2'}, {v:9, f:'1'}, {v:10, f:'0'}],
      title: '7-9 Susceptible | 4-6 Intermediate | 1-3 Resistant',
      viewWindow: {
        min: 0,
        max: 10
      },
      minValue: 0,
      textStyle: {
        fontName: 'Source Sans Pro',
        bold: true,
        fontSize: 12,
        color: '#4d4d4d'
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
        bold: true,
        fontSize: 14,
        color: '#4d4d4d'
      }
    },
    vAxis: {
      title: 'Disease',
      textStyle: {
        fontName: 'Source Sans Pro',
        fontSize: 14,
        bold: false
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
        fontSize: 14,
        bold: true,
        color: '#848484'
      }
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('disease'));

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(moveAnnotations);
    observer.observe(chart.getContainer(), {
      childList: true,
      subtree: true
    });
  });

  function moveAnnotations() {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var barBounds = chartLayout.getBoundingBox('bar#0#0');
    var labels = chart.getContainer().getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label, index) {
      if (label.getAttribute('font-size') === '16') {
        label.setAttribute('x', barBounds.left + chartBounds.left + 4);
        label.setAttribute('fill', 'magenta');
        label.setAttribute('text-anchor', 'start');
      }
    });
  }

  chart.draw(data, options);

    // redraw charts responsively
    (function($) {
        function resizeCharts () {
        chart.draw(data, options);
        }
        $(window).resize(resizeCharts);
    })( jQuery );
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="disease"></div>

注:不建议使用 'magenta' 作为颜色,但表明需要另一种颜色......


1
投票

谢谢@白帽子,感谢你的详细回复。我最终将疾病信息与注释嵌套在一起,然后,我使用现有的textPosition'none'属性隐藏了VAxis。

['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],

    ['Barley Yellow Dwarf', 5, 'Barley Yellow Dwarf | 5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
    ['Fusarium Head Blight', 1, 'Fusarium Head Blight | 9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
    ['Hessian Fly', 1, 'Hessian Fly | 9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
    ['Leaf Rust', 2, 'Leaf Rust | 8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
    ['Powdery Mildew', 1, 'Powdery Mildew | 9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
    ['Soil-Borne Mosaic', 4, 'Soil-Borne Mosaic | 6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
    ['Stem Rust', 1, 'Stem Rust | 9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
    ['Stripe Rust', 1, 'Stripe Rust | 9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
    ['Tan Spot', 5, 'Tan Spot | 5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
    ['Wheat Streak Mosaic', 5, 'Wheat Streak Mosaic | 5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],

然后,我使用现有的textPosition'none'属性隐藏了VAxis。

    vAxis: {
        textPosition: 'none',
      ...etc.

最终结果是这样的Fixed bar chart example

© www.soinside.com 2019 - 2024. All rights reserved.