多个 X 轴标签谷歌图表答案

【问题标题】：Multiple X axis labels google charts多个 X 轴标签谷歌图表
【发布时间】：2016-03-01 20:02:43
【问题描述】：

如何使用谷歌图表 API 创建多个 x 轴标签？

我现在正在尝试创建一个条形图，其中主要的 x 轴标签为“产品”，以及与相关产品相关的各个条形图。但是，我想按月分隔一组“n”产品（来自数据库的数据）。

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

提前感谢任何可以帮助我的人！

【问题讨论】：

标签： javascript jquery graph charts

【解决方案1】：

带有谷歌图表的双 x 轴条形图示例。取自他们的 api 文档，可以在这里找到：

Double x-axis bar chart

<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 轴，只需要双标签像这样imageshack.com/a/img923/5359/JZy0Rq.png
我在谷歌图表中没有看到这个功能。不确定在您的情况下是否可行，但是否可以在图表区域之外为标签添加 html 元素？看到人们在图表之外添加看起来像是 google 图表框架的一部分的 html 的情况并不少见。