Stacked и сгруппированных столбцов Google диаграммы

Question

У меня есть набор

var data = new google.visualization.arrayToDataTable([ 
    ['Month', 'Rate', 'Interest', 'Principle', 'Balance','New Balance'], 
    ['Jan', 321, 600, 816, 319, 890], 
    ['Feb', 163, 231, 539, 594, 678], 
    ]); 

Я хочу Stack и Группа вышеприведенные данные 2 в то время (ставка, проценты), (принцип, баланс) и один последний New Balance как отдельный бар. Как это можно достичь в графиках Google.

Я новичок в этом деле. Любая помощь оценивается здесь, это информация о том, как группировать данные в 2 бара, как это можно улучшить, чтобы соответствовать моим требованиям.

How to make a grouped bar stack with Google charts?

Answer 1

с помощью опции isStacked, если установлен верно, складывает элементы для всех серий при каждом значении домена.

это означает, что значения для всех столбцов для каждой строки будет отображаться в одном стеке

как таковой, чтобы создавать отдельные стеки, данные должны быть разделены на ряды

что-то вроде следующего рабочего сниппет ...

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Month\nCategory', 'Bottom', 'Top'], 
 
    ['Rate/Interest', 321, 600], 
 
    ['Principle/Balance\nJan', 816, 319], 
 
    ['New Balance', 890, null], 
 
    ['Rate/Interest', 163, 231], 
 
    ['Principle/Balance\nFeb', 539, 594], 
 
    ['nNew Balance', 678, null], 
 
    ]); 
 

 
    var options = { 
 
    height: 400, 
 
    isStacked: true, 
 
    legend: 'none', 
 
    width: 800 
 
    }; 
 

 
    var chartDiv = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(chartDiv); 
 
    chart.draw(data, options); 
 
}

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