Angular Google图表轴在中间，if值为零

Question

当我创建一个所有值都设置为零的图表(使用Google图表)时，轴位于图表的中间。

我怎么能把它放在底部呢?

下面是代码:

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Average Revenue');
data.addRows([
  ['2004', 0],
  ['2005', 0],
  ['2006', 0],
  ['2007', 0]
]);
var options = {
  title: 'Revenue by Year',
  seriesType: "bars",
  series: {1: {type: "line"}},  
  vAxis: {title: 'Year',
          titleTextStyle:{color: 'red'}},
    colors:['red','black']
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

http://jsfiddle.net/boj6ztLo/

谢谢

Answer 1

设置以下配置选项…

vAxis.viewWindow.min: 0

请参阅下面的工作代码片段…

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Average Revenue');
  data.addRows([
    ['2004', 0],
    ['2005', 0],
    ['2006', 0],
    ['2007', 0]
  ]);
  var options = {
    title: 'Revenue by Year',
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    },
    vAxis: {
      title: 'Year',
      titleTextStyle: {
        color: 'red'
      },
      viewWindow: {
        min: 0
      }
    },
    colors:['red','black']
  };
  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

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

注意

建议不使用 jsapi来加载库，根据发行说明…

通过jsapi加载器仍然可用的Google Charts版本不再一致地更新。从现在开始请使用新的静态加载器(loader.js)。

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

这也将改变load语句为…

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