Question

我使用带有Dataview的堆叠Google Columns图表将值添加到列中。但是，该数字有时会显示在另一列的列之外。

如何阻止此操作，或将数字置于列中间？

此外，当值为0时，它还会显示数字，这很烦人。

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {  
  var data = new google.visualization.arrayToDataTable([
  ['Month', 'A', 'B', 'C'],
  ['Jan', 1, 4, 6],
  ['Feb', 0, 2, 11],
  ['Mar', 4, 0, 1],
  ['Apr', 0, 0, 0],
  ['May', 14, 1, 11],
  ['Jun', 12, 1, 7]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { 
                   calc: "stringify",
                   sourceColumn: 1,
                   type: "string",
                   role: "annotation" 
                   },
                   2, 
                   { 
                   calc: "stringify",
                   sourceColumn: 2,
                   type: "string",
                   role: "annotation"
                   }, 
                   3, 
                   { 
                   calc: "stringify",
                   sourceColumn: 3,
                   type: "string",
                   role: "annotation" }]);

  var options = {
    legend: { position: 'top', maxLines: 3 },
    isStacked: true,
    height: 600
  };

  var chart = new google.visualization.ColumnChart(
  document.getElementById('chart_div'));
  chart.draw(view, options);
}

Answer 1

解决此问题的最简单方法是减少堆积列上注释/标注的字体大小或增加图形的高度，以便注释/标签不会显示在列之外。

我的解决方案

var options = {
    legend: { position: 'top', maxLines: 3 },
    isStacked: true,
    height: 700,
    annotations: {textStyle: {fontSize: 10, bold: true}}
  };

表格行annotations.textStyle下提供了有关注释样式和其他功能的更多信息here。

为避免图表上显示数字0，我想您可以用null替换0值。尽管如此，这不是最好的方法，它可以完成这项工作。如果此数据来自其他来源且不是静态的，则可能需要编写一个函数来替换0。

['Month', 'A', 'B', 'C'],
['Jan', 1, 4, 6],
['Feb', null, 2, 11],
['Mar', 4, null, 1],
['Apr', null, null, null],
['May', 14, 1, 11],
['Jun', 12, 1, 7]

堆积的Google柱形图中的杂乱数字

1 个答案: