Google 折线图显示负值

Question

我正在使用以下代码显示 Google 折线图

google.charts.load('current', {'packages':['corechart']});  
      //google.charts.setOnLoadCallback(drawChart);
     
    function drawChart(chart_data) {
        
        
                
        
        var jsonData = chart_data;
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Day');
            data.addColumn('number', 'SOLD');
            data.addColumn('number', 'BOUGHT');
            $.each(jsonData, function(i, jsonData){
                var Day = parseFloat($.trim(jsonData.Day));
                var SOLD = parseFloat($.trim(jsonData.SOLD));
                var BOUGHT = parseFloat($.trim(jsonData.BOUGHT));
                data.addRows([[Day, SOLD, BOUGHT]]);
            });
      
        var options = {
                fontName: 'Roboto',
                height: 400,
                fontSize: 12,
                chartArea: {
                    left: '7%',
                    width: '93%',
                    height: 350
                },
                pointSize: 10,
                curveType: 'function',
                backgroundColor: 'transparent',
                tooltip: {
                    textStyle: {
                        fontName: 'Roboto',
                        fontSize: 13
                    }
                },
                vAxis: {
                    title: '',
                    titleTextStyle: {
                        fontSize: 13,
                        italic: false,
                        color: '#333'
                    },
                   
                    viewWindow: {
                        min: 0
                    },
                    textStyle: {
                        color: '#333'
                    },
                    baselineColor: '#ccc',
                    gridlines:{
                        color: '#eee',
                        count: 10
                    }
                   
                },
                hAxis: {
                    textStyle: {
                        color: '#333'
                    }
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        color: '#333'
                    }
                },
                series: {
                    0: { color: '#f58646' },
                    1: { color: '#66BB6A' }
                }
            };

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

        chart.draw(data, options);
      }

如果数据大于 0

，它工作正常，如下所示

但如果所有数据值为0，则显示如下

我不想显示负数据，我的数据中永远不会有负值。因此，我按照此处某些问题的建议在选项中添加了如下代码。

viewWindow: {
  min: 0
},

但是它不起作用，我仍然显示负值。谁能帮我解决这个难题？同样在水平线上，它缺少日期并以 5 个为一组显示，例如 5、10、15，是否可以显示全部？

谢谢！

Answer 1

这看起来像是 'current' 版本的某种错误。
如果我们使用版本 '45' 它可以正常工作。

google.charts.load('45', ...

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

google.charts.load('45', {
  packages: ['corechart']
}).then(function() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'SOLD');
  data.addColumn('number', 'BOUGHT');
  data.addRows([
    [0, 0, 0],
    [5, 0, 0],
    [10, 0, 0],
    [15, 0, 0],
    [20, 0, 0],
    [25, 0, 0],
    [30, 0, 0]
  ]);

  var options = {
    fontName: 'Roboto',
    height: 400,
    fontSize: 12,
    chartArea: {
      left: '7%',
      width: '93%',
      height: 350
    },
    pointSize: 10,
    curveType: 'function',
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        fontName: 'Roboto',
        fontSize: 13
      }
    },
    vAxis: {
      title: '',
      titleTextStyle: {
        fontSize: 13,
        italic: false,
        color: '#333'
      },

      viewWindow: {
        min: 0
      },
      textStyle: {
        color: '#333'
      },
      baselineColor: '#ccc',
      gridlines: {
        color: '#eee',
        count: 10
      }

    },
    hAxis: {
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: '#333'
      }
    },
    series: {
      0: {
        color: '#f58646'
      },
      1: {
        color: '#66BB6A'
      }
    }
  };

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

  chart.draw(data, options);
});

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

或者，当使用 'current' 版本时，
如果我们将 max 值添加到 viewWindow，那么它将起作用...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'SOLD');
  data.addColumn('number', 'BOUGHT');
  data.addRows([
    [0, 0, 0],
    [5, 0, 0],
    [10, 0, 0],
    [15, 0, 0],
    [20, 0, 0],
    [25, 0, 0],
    [30, 0, 0]
  ]);

  var options = {
    fontName: 'Roboto',
    height: 400,
    fontSize: 12,
    chartArea: {
      left: '7%',
      width: '93%',
      height: 350
    },
    pointSize: 10,
    curveType: 'function',
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        fontName: 'Roboto',
        fontSize: 13
      }
    },
    vAxis: {
      title: '',
      titleTextStyle: {
        fontSize: 13,
        italic: false,
        color: '#333'
      },

      viewWindow: {
        min: 0,
        max: 1
      },
      textStyle: {
        color: '#333'
      },
      baselineColor: '#ccc',
      gridlines: {
        color: '#eee',
        count: 10
      }

    },
    hAxis: {
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: '#333'
      }
    },
    series: {
      0: {
        color: '#f58646'
      },
      1: {
        color: '#66BB6A'
      }
    }
  };

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

  chart.draw(data, options);
});

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

Google 折线图显示负值

Google LineChart Displaying Nagative Value

charts

linechart

google-visualization