标签：charts google-visualization javascript

我正在尝试使用具有JavaScript库的多个AxisX创建图表(最好使用Google或chartjs).

我在excel上做了一个例子来说明我在寻找什么,这是例子：

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

      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>
   

解决方法:

谷歌图表不提供多个组标签

但您可以在图表的“就绪”事件中手动添加它们

请参阅以下工作片段,
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

标签：charts,google-visualization,javascript
来源： https://codeday.me/bug/20191109/2010991.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。