多個X軸標籤google圖表

如何使用google圖表API創建多個x軸標籤？多個X軸標籤google圖表

我試圖創建一個條形圖，現在主要的x軸標籤是「產品」，以及與相關產品相關的單條。但是，我想將幾個'n'產品（從數據庫進入的數據）隔開幾個月。

基本上我想主X軸標籤「產品」和各組產品和這組按月關於所述產品分組在一起每個「產品集」條形圖的下方的標籤之間的分界線

預先感謝任何能夠幫助我的人！

2016-03-01 Vidhyasagar

使用谷歌圖表示例雙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>

不知道如果這正是你想做的事，但如果不能讓我們知道，我們可以稍微修改此。

來源

2016-03-01 20:10:23 user2263572

不太..我不需要雙重x軸的只是兩層標籤像這樣的事情 http://imageshack.com/a/img923/5359/JZy0Rq.png – Vidhyasagar

我還沒有看到該功能在谷歌圖表。不知道在你的情況下它是否可行，但是可以在標籤的圖表區域之外添加html元素嗎？在他們的圖表之外添加HTML看起來像是谷歌圖表框架的一部分，這種情況並不少見。 – user2263572

多個X軸標籤google圖表

回答

相關問題