Question

我希望我的图形看起来像这样，条形图位于haxis值之间。

我的代码如下：

var data3 = google.visualization.arrayToDataTable([
     ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
     ['2004/05',  165,      938,         522,             998,           450,      614.6],
     ['2005/06',  135,      1120,        599,             1268,          288,      682],
     ['2006/07',  157,      1167,        587,             807,           397,      623],
     ['2007/08',  139,      1110,        615,             968,           215,      609.4],
     ['2008/09',  136,      691,         629,             1026,          366,      569.6]
     ]);

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

Answer 1

您可以尝试使用带有日期的continuous axis

然后使用hAxis.format和hAxis.ticks仅显示年份

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Date', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
      [new Date(2013, 0, 1), 165, 938, 522, 998, 450, 614.0],
      [new Date(2013, 1, 1), 135, 940, 542, 990, 454, 614.1],
      [new Date(2013, 2, 1), 157, 942, 562, 988, 458, 614.2],
      [new Date(2013, 8, 1), 139, 944, 582, 980, 462, 614.3],
      [new Date(2013, 9, 1), 136, 946, 652, 968, 466, 614.4],
      [new Date(2014, 10, 1), 152, 938, 522, 998, 450, 614.0],
      [new Date(2014, 11, 1), 164, 940, 542, 990, 454, 614.1],
      [new Date(2015, 2, 1), 166, 942, 562, 988, 458, 614.2],
      [new Date(2015, 3, 1), 158, 944, 582, 980, 462, 614.3],
      [new Date(2015, 4, 1), 160, 946, 652, 968, 466, 614.4],
    ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      vAxis: {title: 'Cups'},
      hAxis: {
        title: 'Year',
        format: 'yyyy',
        ticks: [
          new Date(2013, 0, 1),
          new Date(2014, 0, 1),
          new Date(2015, 0, 1),
          new Date(2016, 0, 1)
        ]
      },
      bar: {
        width: 100
      },
      seriesType: 'bars',
      series: {5: {type: 'line'}}
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ComboChart(container);

    chart.draw(data, options);
  },
  packages:['corechart']
});

＆＃13;

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

＆＃13;

如何在haxis值之间放置条形图

1 个答案: