带有扩展 X 轴的 Google 图表答案

【问题标题】：Google chart with extended X Axis带有扩展 X 轴的 Google 图表
【发布时间】：2013-12-24 10:46:23
【问题描述】：

您好，我正在谷歌条形图中尝试类似下面的内容。

以上只是将 X 轴延伸两次的示例，用于两个日期。我尝试将它动态设置为 2 个日期，输出如下所示。

代码如下，但我没有在产品“A”、“B”等下方设置日期取得突破。有什么建议可以做到这一点吗？我做了倾斜使用 hAxis: {title: "TIME FRAME",textPosition:"out",slantedText:true},

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['product', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
          ['A',  165,      938,         522,             998,           450,      614.6],
          ['B',  135,      1120,        599,             1268,          288,      682],
          ['C',  157,      1167,        587,             807,           397,      623],
          ['D',  139,      1110,        615,             968,           215,      609.4],
          ['E',  136,      691,         629,             1026,          366,      569.6],
           ['product', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
          ['A',  165,      938,         522,             998,           450,      614.6],
          ['B',  135,      1120,        599,             1268,          288,      682],
          ['C',  157,      1167,        587,             807,           397,      623],
          ['D',  139,      1110,        615,             968,           215,      609.4],
          ['E',  136,      691,         629,             1026,          366,      569.6]
        ]);

        var options = {
          title : 'Monthly Coffee Production by Country',
          vAxis: {title: "Cups"},
          hAxis: {title: "TIME FRAME"},
          seriesType: "bars",
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

【问题讨论】：

可视化 API 不支持像这样的多级轴。您可以获得的最接近的是使用多个 'domain' column roles。

标签： google-visualization

【解决方案1】：

借助这个出色的 stackexchange 答案 (Google Chart: How to draw the vertical axis for LineChart?)，我找到了解决上述问题的方法，如下所示：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chango">

    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['product', 'SOME 1', 'TWO SUM', 'THREE SUM'],
       //     [role:  domain,   data,       data,      data,   domain,   data,     data],    --  hint for cols
          ['A',  6,      3,         2],
          ['B' ,10,      11,        5],
          ['C',  12,      11,       0],
          ['D', 19,      7,        2],
          ['E',  19,      0,         3],

          ['A',  10,      3,        2],
          ['B',  0,      11,        5],
          ['C',  5,      11,        5],
          ['D',  10,      11,        2],
          ['E',  12,      6,         1]
        ]);

        var options = {
          title : 'status of products',
          interpolateNulls: true,
          vAxis: {title: " --- Count of Product  ----->",titleTextStyle:{ fontName: 'Chango'}},
          hAxis: {title: "----------------------TIME FRAME ---------------->",titleTextStyle:{ fontName: 'Chango'},textStyle: {color: '#000', fontSize: 12},textPosition:"out",slantedText:true},
          seriesType: "bars",
        };

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


// Add dummy data for the axis labels
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'x');
    data2.addColumn('number', 'dummy');
    data2.addRows([
      [' ', null],
      [' ', null],
      ['11/07/2013', null],
        ['', null],
      ['', null],
      ['', null],
        ['', null],
      ['11/14/2013', null],
      ['', null],
      ['', null]
    ]);
   chart2 = new google.visualization.ComboChart(document.getElementById('chart_base'));
    chart2.draw(data2,
                {
                  chartArea: {
                    top:0,
                    height:"0%"
                  },
                  min: 0,
                  max: 0,
                  hAxis: {
                    baselineColor: '#FFFFFF'
                  },
                  vAxis: {
                    baselineColor: '#FFFFFF',
                    direction: -1,
                    textPosition: 'none',
                    gridlines: {
                      color: '#FFFFFF'
                    }
                  }
                });
       }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
        <div id="chart_base" style="width: 900px; height: 500px;"></div>

  </body>
</html>

最终输出如下：

【讨论】：