多個 X 軸標簽谷歌圖表

Question

如何使用谷歌圖表 API 創建多個 x 軸標簽？

我現在正在嘗試創建一個條形圖，其中主要的 x 軸標簽為“產品”，以及與相關產品相關的各個條形。 但是，我想按月分隔一組“n”個產品（來自數據庫的數據）。

本質上，我想要一個主要的 X 軸標簽“產品”和每組產品之間的分界線以及這組條形圖下方的標簽，這些條形圖與按月將每個“產品組”組合在一起的產品有關

在此先感謝任何可以幫助我的人！！

Answer 1

使用谷歌圖表示例雙 x 軸條形圖。 取自他們的 api 文檔，可以在這里找到：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

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

不確定這是否正是您想要做的，但如果不是，請告訴我們，我們可以稍微修改一下。

多個 X 軸標簽谷歌圖表

問題描述

1 個解決方案

解決方案1
2 2016-03-01 20:10:23

多個 X 軸標簽谷歌圖表

問題描述

1 個解決方案

解決方案1 2 2016-03-01 20:10:23

解決方案1
2 2016-03-01 20:10:23