Javascript 多个X轴标签谷歌图表_Javascript_Jquery_Graph_Charts

Javascript 多个X轴标签谷歌图表

javascript jquery graph charts

Javascript 多个X轴标签谷歌图表,javascript,jquery,graph,charts,Javascript,Jquery,Graph,Charts,如何使用google charts API创建多个x轴标签我正在尝试创建一个条形图，其中主x轴标签为“产品”，单个条形图与所讨论的产品相关。但是，我希望将一组“n”产品（来自数据库的数据）按月份进行分离基本上，我想要一个主X轴标签“产品”和每组产品之间的分界线，以及这组条形图下面的标签，这些条形图与按月将每个“产品集”分组在一起的产品有关提前感谢任何能帮助我的人谷歌图表双x轴条形图示例。摘自api文档，可在此处找到： load（'current'，{'packages'：['bar'

如何使用google charts API创建多个x轴标签

我正在尝试创建一个条形图，其中主x轴标签为“产品”，单个条形图与所讨论的产品相关。但是，我希望将一组“n”产品（来自数据库的数据）按月份进行分离

基本上，我想要一个主X轴标签“产品”和每组产品之间的分界线，以及这组条形图下面的标签，这些条形图与按月将每个“产品集”分组在一起的产品有关

提前感谢任何能帮助我的人

谷歌图表双x轴条形图示例。摘自api文档，可在此处找到：


load（'current'，{'packages'：['bar']}）；
google.charts.setOnLoadCallback（drawStuff）；
函数drawStuff（）{
var data=new google.visualization.arrayToDataTable([
[“星系”、“距离”、“亮度”]，
['Canis Major侏儒'，8000，23.3]，
[《人马座矮人》，24000，4.5]，
['Ursa MARGER II Dwarf'，30000，14.3]，
['Lg.麦哲伦云'，50000，0.9]，
[Bootes I'，60000，13.1]
]);
变量选项={
宽度：800，
图表：{
标题：“附近星系”，
副标题：“左侧距离，右侧亮度”
},
条形图：“水平”，//物料条形图为必填项。
系列：{
0:{axis:'distance'}，//将系列0绑定到名为'distance'的轴。
1:{axis:'brightness'}//将系列1绑定到名为'brightness'的轴。
},
轴线：{
x:{
距离：{label:'parsecs'}，//底部x轴。
亮度：{侧面：“顶部”，标签：“视在震级”}//顶部x轴。
}
}
};
var chart=new google.charts.Bar（document.getElementById（'dual_x_div'）；
图表绘制（数据、选项）；
};

不确定这是否正是您想要做的，但如果不让我们知道，我们可以稍微修改一下

不完全是。。我不需要一个双x轴，只要在它上面加上两个标签，就像这样，我在谷歌图表中没有看到过这种功能。不确定在您的情况下是否可行，但是否可以在标签的图表区域之外添加html元素？人们在他们的图表之外添加html，看起来就像是google图表框架的一部分，这种情况并不少见。

<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>