javascript - 使用 javascript 在 AxisX 上进行多个组

Question

我正在尝试使用 javascript 库(最好是 google 或 chartjs)创建一个包含多个 AxisX 的图表。

我在 excel 上做了一个例子来说明我在找什么，下面是例子:

我尝试了下一个 fiddle ，但显然没有成功。

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
         ['Month', ['Activo, inactivo'], ['Activo, inactivo'], ['Activo, inactivo'], ['Activo, inactivo']],
         ['Gestor A',  [165,100],      [938,800],         [522,100],             [998, 1000]],
         ['Gestor B',  [135,90],      [1120,1000],        [599,1000],             [1268,700]],
         ['Gestor C',  [157,70],      [1167,800],        [587,400],             [807,900]],
         ['Gestor D',  [139,160],      [1110,1200],        [615,500],             [968,1000]],
         ['Gestor E',  [136,200],      [691,800],         [629,700],             [1026,1200]]
      ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      vAxis: {title: 'Cups'},
      hAxis: {title: ['Month']},
      seriesType: 'bars',
      series: {5: {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>
   

Answer 1

google charts 不提供多个组标签

但您可以在图表的'ready' 事件中手动添加它们

请参阅以下工作片段，
x轴标签的位置用于绘制组标签和线条

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
   ['Month', 'Gestor A', 'Gestor B', 'Gestor C', 'Gestor D', 'Gestor E'],
   ['Activo', 165, 135, 157, 139, 136],
   ['Inactivo', 100, 90, 70, 160, 200],
   ['Activo', 938, 1120, 1167, 1110, 691],
   ['Inactivo', 800, 1000, 800, 1200, 800],
   ['Activo', 522, 599, 587, 615, 629],
   ['Inactivo', 100, 1000, 400, 500, 700],
   ['Activo', 998, 1268, 807, 968, 1026],
   ['Inactivo', 1000, 700, 900, 1000, 1200]
  ]);

  var options = {
    chartArea: {
      bottom: 64,
      left: 48,
      right: 16,
      top: 64,
      width: '100%',
      height: '100%'
    },
    hAxis: {
      maxAlternation: 1,
      slantedText: false
    },
    height: '100%',
    legend: {
      alignment: 'end',
      position: 'top'
    },
    seriesType: 'bars',
    title : 'Title',
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var indexGroup = 0;
    var indexRow = 0;
    var months = ['Janeiro', 'Fevereiro', 'Marco', 'Abril'];
    var xCoords = [];

    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
      // process x-axis labels
      var xAxisLabel = data.getFilteredRows([{column: 0, value: text.textContent}]);
      if (xAxisLabel.length > 0) {
        // save label x-coordinate
        xCoords.push(parseFloat(text.getAttribute('x')));

        // add first / last group line
        if (indexRow === 0) {
          addGroupLine(chartBounds.left, chartBounds.top + chartBounds.height);
        }
        if (indexRow === (data.getNumberOfRows() - 1)) {
          addGroupLine(chartBounds.left + chartBounds.width, chartBounds.top + chartBounds.height);
        }

        // add group label / line
        if ((indexRow % 2) !== 0) {
          // calc label coordinates
          var xCoord = xCoords[0] + ((xCoords[1] - xCoords[0]) / 2);
          var yCoord = parseFloat(text.getAttribute('y')) + (parseFloat(text.getAttribute('font-size')) * 1.5);

          // add group label
          var groupLabel = text.cloneNode(true);
          groupLabel.setAttribute('y', yCoord);
          groupLabel.setAttribute('x', xCoord);
          groupLabel.textContent = months[indexGroup];
          text.parentNode.appendChild(groupLabel);

          // add group line
          addGroupLine(chartBounds.left + ((chartBounds.width / 4) * (indexGroup + 1)), chartBounds.top + chartBounds.height);

          indexGroup++;
          xCoords = [];
        }
        indexRow++;
      }
    });

    function addGroupLine(xCoord, yCoord) {
      var parent = container.getElementsByTagName('g')[0];
      var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
      groupLine.setAttribute('x', xCoord);
      groupLine.setAttribute('y', yCoord);
      groupLine.setAttribute('width', 0.8);
      groupLine.setAttribute('height', options.chartArea.bottom);
      parent.appendChild(groupLine);
    }
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

注意:使用图表方法getImageURI时，手动绘制的元素不会显示，
如果您需要图表的图像，可以使用 html2canvas