堆叠和分组列谷歌图表

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],
   ]);

我想一次堆叠和分组上述数据2（费率，利息），（原则，余额）和最后一个新余额作为单独的条。如何在Google图表中实现这一目标。

我对这一切都很陌生。这里有一些帮助，一些关于将数据分组到2条的信息，如何根据我的要求进行改进。

How to make a grouped bar stack with Google charts?

Answer 1

使用选项isStacked，如果设置为true，则为每个域值堆叠所有系列的元素。

这意味着每行的所有列的值将显示在一个堆栈中

因此，要创建单独的堆栈，数据将需要分成行

类似以下工作片段......

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>