多个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图表

回答

相关问题