javascript - 即使谷歌图表中的值为零，如何显示一个小条？

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

只有当值不等于零时才会显示一个条形图

但是，使用对象表示法，我们可以提供值 (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'
    }
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>