Google Charts API:x轴上有多个标签行?

时间:2015-09-29 21:43:34

标签: javascript charts google-visualization

我有这个图表,它是一个显示多个数据的条形图。数据按年(2014年,2015年)和季度(第一季度,第二季度,第三季度,第四季度)进行划分。我可以显示x轴或年份的四分之一,但不能同时显示两者。我制作了一个截图,并将这些年份放在那里,以显示我想要实现的目标。

<html>
 <head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 </head>
 <body>
  <script type="text/javascript">
   google.load('visualization', '1.1', {packages: ['bar']});
   google.setOnLoadCallback(drawBasic);
   function drawBasic() {

  //create data table object
  var data = google.visualization.arrayToDataTable([
      ['','Sales', 'Expenses'],
      ['Q1',1000, 400],
      ['Q2',1000, 400],
      ['Q3',1170, 460],
      ['Q4',900, 500],
      ['Q1',1400, 420],
      ['Q2',1240, 750],
      ['Q3',1001, 360],
      ['Q4',788, 800]
    ]);
  var options = {
    width: 800, height: 600, is3D: false, title: 'Company Earnings'
  };
  var chart = new google.charts.Bar(
    document.getElementById('chart_div'));

 chart.draw(data, google.charts.Bar.convertOptions(options));
}
 </script>
 <div id="chart_div"></div>
</body>
</html>

这是结果(我在绘画中添加了几年):

enter image description here

任何想法如何做到这一点?

1 个答案:

答案 0 :(得分:0)

我记得在某个时候看过以下帖子,可以添加多个x轴细节。也许这会有所帮助:

http://www.lornajane.net/posts/2011/adding-multiple-axis-labels-to-a-google-chart