使用javascript在AxisX上进行多个分组 [英] Multiple group on AxisX with javascript

问题描述

我正在尝试使用带有JavaScript库（最好是Google或chartjs）的多个AxisX创建图表。

I'm trying to create a chart with multiple AxisX with a javascript library (google or chartjs preferable).

我在excel上举了一个例子来说明我正在寻找的示例如下：

I have made an example on excel to illustrate what i'm looking for, here is the example:

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

I've tried the next fiddle but obviously without success.

      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>
   

推荐答案

google图表可以不提供多个组标签

google charts does not offer multiple group labels

，但是您可以在图表的就绪 事件

but you can add them manually on the chart's 'ready' event

请参阅以下工作片段，

x轴标签的位置用于绘制组标签和线条

see following working snippet,
the position of the x-axis labels are used to draw the group labels and lines

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

note: elements drawn manually will not show when using chart method getImageURI,
if you need an image of the chart, you can use html2canvas

这篇关于使用javascript在AxisX上进行多个分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！