Google 未显示图表可视化条形图

Question

我正在使用 Google Chart Visualisation，我正在使用 Combo Chart 和我正在使用的一些数据。我注意到对于某些值，未显示栏。

我正在使用在此页面上使用 JSFiddle 找到的示例来更好地解释问题：https://developers.google.com/chart/interactive/docs/gallery/combochart

HTML代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript代码：

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Bolivia', 'Ecuador'],
      ['2004/05',  881,      938   ],
      ['2004/06',  880,      938   ]
    ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      vAxis: {title: 'Cups'},
      hAxis: {title: 'Month'},
      seriesType: 'bars',
      series: {1: {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

这是此模型的输出：

但是如果我将第一行从 ['2004/05', 881, 938] 更改为 ['2004/05', 880, 938 ] 以便 Bolivia 值相同，880，输出如下:

并且不再显示条形图，因为图表从 880 而不是第一个示例中的 870 开始。

这也会重现接近值，例如

['Month', 'Bolivia', 'Ecuador'],
['2004/05',  92,      95   ],
['2004/06',  92,      95   ]

我的问题是：是否可以强制图形始终启动，例如从 870 开始，以便始终绘制条形图？

Answer 1

您可以在 vAxis 上使用选项 viewWindow。

viewWindow 具有 min 和 max 的属性。

  viewWindow: {
    min: 870
  }

请参阅以下工作片段..

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05',  880,      938   ],
    ['2004/06',  880,      938   ]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      viewWindow: {
        min: 870
      }
    },
    height: 500,
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

另一种选择是ticks。
您可以为每个要显示的标签提供值。

  ticks: [870, 880, 890, 900, 910, 920, 930, 940]

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

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05',  880,      938   ],
    ['2004/06',  880,      938   ]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      ticks: [870, 880, 890, 900, 910, 920, 930, 940]
    },
    height: 500,
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

Google 未显示图表可视化条形图

Google Chart Visualisation Bar Drawing Not Shown

javascript

charts

google-visualization