谷歌图表中的层次结构图 [英] Hierarchies graphs in google charts

问题描述

我该如何构建这样的东西（在轴线上的子类别）

解决方案

虽然请求的布局不能通过标准配置选项获得，但是如果您可以手动修改svg，则可以实现

当图表的'ready'事件触发时，添加类别标签和分组行

看到下面的工作片段，这只是一个例子来显示的可能性

几个假设是基于图表的大小和位置...

google.charts.load（'current'， {callback：drawChart，packages：['corechart']}）; function drawChart（）{var data = google.visualization.arrayToDataTable（['State'，'Store'，'Sales']，['California'，' Donald's Market'，1560]，['California'，'Alexei's'Specialties'，1090]，['California'，'24 -Seven'，345]，['Texas'，'Albert Market '，245]，['Texas'，'Jim''s Market'，245]，['Texas'，'International Food Store'，82]]）; var options = {bars：'horizo​​ntal'，chartArea：{left：204}，height：400，vAxis：{textStyle：{fontSize：10}}}; var chartDiv = document.getElementById（'chart_div'）; var chart = new google.visualization.BarChart（chartDiv）; var view = new google.visualization.DataView（data）; view.setColumns（[1，2，{calc：'stringify'，sourceColumn：2，type：'string'，role：'annotation'}]）; google.visualization.events.addListener（chart，'ready'，function（）{var rowIndex = -1; var stateValue =''; var svgParent = chartDiv.getElementsByTagName（'svg'）[0]; Array.prototype.forEach .call（chartDiv.getElementsByTagName（'text'），function（text）{var groupLabel; if（（text.getAttribute（'text-anchor'）==='end'）&&（parseFloat（text.getAttribute （'x'））<200））{rowIndex ++; if（stateValue！== data.getValue（rowIndex，0））{stateValue = data.getValue（rowIndex，0）; groupLabel = text.cloneNode（true）; groupLabel.setAttribute（'x'，'60'）; groupLabel.innerHTML = stateValue; svgParent.appendChild（groupLabel）; addGroupLine（groupLabel，-24）;} if（rowIndex ===（data.getNumberOfRows（） - 1） ）{addGroupLine（text，16）;}}}）; function addGroupLine（text，yOffset）{var groupLine = chartDiv.getElementsByTagName（ 'rect'）[0] .cloneNode（true）; groupLine.setAttribute（'y'，parseFloat（text.getAttribute（'y'））+ yOffset）; groupLine.setAttribute（'x'，'16'）; groupLine.setAttribute（'height'，'0.8'）; groupLine.setAttribute（'width'，'188'）; groupLine.setAttribute（'stroke'，'none'）; groupLine.setAttribute（'stroke-width'，'0'）; groupLine.setAttribute（'fill'，'＃000000'）; svgParent.appendChild（groupLine）; }}）; chart.draw（view，options）;}

< script>< / div>< / script> / pre>

How can I build something like this (with subcategories on the one of the axis)

解决方案

although the requested layout is not available via standard configuration options,
it is possible to achieve, if you're ok with modifying the svg manually

when the chart's 'ready' event fires, add the category labels and group lines

see following working snippet, which is just an example to show the possibility

several assumptions are made based on the size and placement of the chart...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Store', 'Sales'],
    ['California', 'Donald\'s Market', 1560],
    ['California', 'Alexei\'s Specialties', 1090],
    ['California', '24-Seven', 345],
    ['Texas', 'Albert Market', 245],
    ['Texas', 'Jim\'s Market', 245],
    ['Texas', 'International Food Store', 82]
  ]);

  var options = {
    bars: 'horizontal',
    chartArea: {
      left: 204
    },
    height: 400,
    vAxis: {
      textStyle: {
        fontSize: 10
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(chartDiv);

  var view = new google.visualization.DataView(data);
  view.setColumns([1, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
  }]);

  google.visualization.events.addListener(chart, 'ready', function () {
    var rowIndex = -1;
    var stateValue = '';
    var svgParent = chartDiv.getElementsByTagName('svg')[0];
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('text'), function(text) {
      var groupLabel;
      if ((text.getAttribute('text-anchor') === 'end') &&
          (parseFloat(text.getAttribute('x')) < 200)) {
        rowIndex++;
        if (stateValue !== data.getValue(rowIndex, 0)) {
          stateValue = data.getValue(rowIndex, 0);
          groupLabel = text.cloneNode(true);
          groupLabel.setAttribute('x', '60');
          groupLabel.innerHTML = stateValue;
          svgParent.appendChild(groupLabel);
          addGroupLine(groupLabel, -24);
        }
        if (rowIndex === (data.getNumberOfRows() - 1)) {
          addGroupLine(text, 16);
        }
      }
    });

    function addGroupLine(text, yOffset) {
      var groupLine = chartDiv.getElementsByTagName('rect')[0].cloneNode(true);
      groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
      groupLine.setAttribute('x', '16');
      groupLine.setAttribute('height', '0.8');
      groupLine.setAttribute('width', '188');
      groupLine.setAttribute('stroke', 'none');
      groupLine.setAttribute('stroke-width', '0');
      groupLine.setAttribute('fill', '#000000');
      svgParent.appendChild(groupLine);
    }
  });

  chart.draw(view, options);
}

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

这篇关于谷歌图表中的层次结构图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！