如果只有零和正值，谷歌折线图将变为负值答案

【问题标题】：Google line chart goes to negative values if has only zero and positive ones如果只有零和正值，谷歌折线图将变为负值
【发布时间】：2017-09-26 09:04:23
【问题描述】：

我使用谷歌图表来构建图表。这是我的代码：

var array = [["Day", "Value"], ["15", 0], ["16", 0], ["17", 0], ["18", 0], ["19", 0], ["20", 0], ["21", 7], ["22", 0], ["23", 0], ["24", 0], ["25", 0]];

值数组只有零值和正值

这仅显示正值

var data = google.visualization.arrayToDataTable(array);
var options = {
    curveType: 'function',
    legend: {position: 'bottom'},
    vAxis: {viewWindowMode: "explicit", viewWindow: {min: 0}, minValue: 0, maxValue: 4},
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);

这显示负值和正值

var data = google.visualization.arrayToDataTable(array);
var options = {
    curveType: 'function',
    legend: {position: 'bottom'},
    vAxis: {viewWindowMode: "explicit", minValue: 0, maxValue: 4},
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);

That is how graph looks like. Line goes to negative values

If only positive values shown the line breaks

如何在图表上只显示正值？不换行

【问题讨论】：

如果你想在不换行的情况下显示值，你必须改变一些东西的负值，例如零
@Redair 但我没有负值。我不知道他们为什么会出现在这里

标签： javascript google-visualization

【解决方案1】：

如果您使用 curveType: 'function' 它是近似值。只需评论或删除此行：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);



      function drawChart() {
        var data = google.visualization.arrayToDataTable([["Day", "Value"], ["15", 0], ["16", 0], ["17", 0], ["18", 0], ["19", 0], ["20", 0], ["21", 7], ["22", 0], ["23", 0], ["24", 0], ["25", 0]]);

        var options = {
          title: 'Company Performance',
          //curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

【讨论】：

这个解决方案很好，但是现在图形上的线条不再平滑了。也许还有另一种保持直线曲线的变体？

【解决方案2】：

使图最小值为0，这样就不会变成负数了。

          viewWindowMode:'explicit',
          viewWindow:{
            min:0
          }},

【讨论】：

【解决方案3】：

这个解决方案对我有用。

viewWindowMode:'explicit' -- 现已弃用。

vAxis: {
    viewWindow: {
       min: 0
    }
}

【讨论】：