Question

有时我会有一系列值都为零的序列。当我应用ColumnChart时，图全为空，没有显示出实际上有零值。

即使值是零，如何显示条形图？

我尝试了以下选项：

{
     type: options.type,
     cssStyle: options.cssStyle,
     data: {},
     options: {
                chartArea:{width:'80%'},
                pointsVisible: true,
                lineWidth: 4,
                curveType: "none",
                fontName: "Open Sans",
                fontSize: 10,
                colors: options.colors,
                isStacked: "false",
                fill: 10,
                displayExactValues: true,
                vAxis: {viewWindowMode:'explicit', minValue: -1, viewWindow: {min:0}, gridlines: {"color": "#f2f2f2", "count": 2}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
                hAxis: {gridlines: {"color": "#f2f2f2"}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
                legend: {position: 'bottom', alignment: 'center', textStyle: options.textStyle},
}

Answer 1

仅当值不等于零时才会显示条形

但是，使用对象符号，我们可以提供值（select * from Property where __key__ has ancestor(Language, 'en')）和格式化值（v:）

使用以下命令，将显示该栏，但是将鼠标悬停时，工具提示将显示零值

f:

请参阅以下工作片段...

{v: 0.1, f: '0'}

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['A', {v: 0.1, f: '0'}],
    ['B', 2],
    ['C', 3],
    ['D', 4]
  ]);

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 0, column: 1}]);
  });

  chart.draw(data, {
    tooltip: {
      trigger: 'both'
    }
  });
});

Answer 2

在您的代码中，测试零值并将其转换为.1或适合您比例的任何值。

function vAxisTest (vAxis) {
   let scale = .1; //
   if(vAxis === 0) { 
       vAxis = scale;
       return scale;
   }
  else { return vAxis; }
}

即使Google Charts中的值为零，如何显示小条呢？

2 个答案: