堆积和分组的列谷歌图表答案

【问题标题】：Stacked and grouped column google charts堆积和分组的列谷歌图表
【发布时间】：2017-01-26 15:58:56
【问题描述】：

我有一套

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 (Rate,Interest), (Principle, Balance) 和最后一个 New Balance 作为一个单独的 Bar。如何在 Google 图表中实现这一点。

我对这一切都很陌生..这里赞赏的任何帮助都是一些关于将数据分组到 2 条中的信息如何改进以满足我的要求。

How to make a grouped bar stack with Google charts?

【问题讨论】：

你为什么要问你在哪里链接重复？
stacked column chart for two data sets - Google Charts的可能重复
另一个有 2 个堆叠的条形图。我正在寻找 3 个条形图，每个条形图有 2 个数据。

标签： charts google-visualization stacked

【解决方案1】：

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

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

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

类似于下面的工作 sn-p...

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>

【讨论】：

希望这会有所帮助——至于分组，可以手动添加，如this answer...

【解决方案2】：

    <html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2012',  900,      390],
               ['2013',  1000,      400],
               ['2014',  1170,      440],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);

            var options = {title: 'Population (in millions)', isStacked:true};  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }`enter code here`
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

【讨论】：