谷歌折线图显示负值

Posted 2023-05-07

【中文标题】谷歌折线图显示负值

【英文标题】：Google LineChart Displaying Nagative Value

【发布时间】：2022-01-22 02:51:17

【问题描述】：

我正在使用以下代码显示 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，是否可以全部显示？

谢谢！

【参考方案1】：

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

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

请参阅以下工作 sn-p...

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>

【讨论】：

是的，先生，它解决了难题。非常感谢！