Иерархии графики в Google картах

Question

Как я могу построить что-то вроде этого (с подразделами на одной оси)

Answer 1

хотя запрашиваемая макет не доступны через стандартные параметры конфигурации,
можно достичь, если вы нормально с модификацией вручную 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: '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>