javascript - pastel - Gráficos de jerarquías en gráficos de Google

graficas html5 javascript-librerias

Question

¿Cómo puedo construir algo como esto (con subcategorías en el eje)

Answer 1

aunque el diseño solicitado no está disponible a través de las opciones de configuración estándar,
es posible lograrlo, si estás de acuerdo con modificar el svg manualmente

cuando el evento ''ready'' del gráfico se activa, agregue las etiquetas de categoría y las líneas de grupo

vea el siguiente fragmento de trabajo, que es solo un ejemplo para mostrar la posibilidad

se hacen varias suposiciones basadas en el tamaño y la ubicación del gráfico ...

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>