如何使用Google图表制作分组的条形码堆栈？ [英] How to make a grouped bar stack with Google charts?

问题描述

我使用的是Google Charts API 1.1，但我根本无法制作分组堆栈。
我用targetAxisIndex将它们分隔成两个轴，它有点作用，但如果我没有为每个yAxis设置最大值，它们的缩放比例就会有所不同，并且一旦两个分组堆栈实际上都指向同样的事情。

我想知道我可以做出类似这样的事情：

其中

  var data = new google.visualization.arrayToDataTable（[
 ['Year'，'A'，'B'，'C'，' D']，
 ['2001'，70,600,816,319]，
 ['2002'，163,231,539,594]，
 ['2003'，125 ，819，70，578]，
 ['2004'，397，536，313，298] 
]）; 
 
 ... 
 
 var chart = new google.charts.Bar（document.getElementById（'chart_div'））; 
 chart.draw（data，google.charts.Bar.convertOptions（options））; 
  

JSFiddle

I'm using Google Charts API 1.1 but i simply can't make grouped stacks. I've used the "targetAxisIndex" separating them into two axis and it kinda works but if i don't set max value for each yAxis they are scaled differently and it's useless once both of the grouped stacks actually refers to the same thing.

I'd like to know i can make something similar to this: http://www.highcharts.com/demo/column-stacked-and-grouped

解决方案

If you use:

 var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
    },
  };

That should force them to scale the same, and keep the same axis on both sides but hide the rightmost.

Where

var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 70, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 70, 578],
    ['2004', 397, 536, 313, 298]
]);

...

var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));

JSFiddle

这篇关于如何使用Google图表制作分组的条形码堆栈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！