Column stacked chart by groups

问题:

I have a column chart that shows power consumption in current and previous years. Now this consumption comes from different sources, so I would like to chart these values in multiple columns that show stacked values.

I am using google chart, but setting the isStacked parameter to true in the options array just stacks every single value for a specific row. What I want to do achieve is something like this:

That is, rows with multiple stacked columns. Is this even possible with Google Chart API?

回答1:

This is doable with a kludge:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Cars', 'Trucks'],
    ['', null, null],
    ['US', 15, 15],
    ['Canada', 17, 17],
    ['Europe', 13, 13],
    ['Mexico', 16, 16],
    ['Asia', 20, 20],
    ['', null, null],
    ['US', 15, 15],
    ['Canada', 17, 17],
    ['Europe', 13, 13],
    ['Mexico', 16, 16],
    ['Asia', 20, 20],
    ['', null, null],
    ['US', 15, 15],
    ['Canada', 17, 17],
    ['Europe', 13, 13],
    ['Mexico', 16, 16],
    ['Asia', 20, 20],
    ['', null, null],
    ['US', 15, 15],
    ['Canada', 17, 17],
    ['Europe', 13, 13],
    ['Mexico', 16, 16],
    ['Asia', 20, 20],
    ['', null, null],
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {isStacked:true, width:800, hAxis: {showTextEvery:1, slantedText:true}}
      );
}

This is probably not a great way of doing this. Basically, you are trying to make a single chart show too much information and would be far better off splitting up your data in to multiple charts. For instance, you can use domain roles, or you can just use a line chart to be able to compare the difference between trucks and cars (which you can't currently do because of the different baselines). You can also compare different countries on just cars or trucks as a standard column chart (not stacked). You can use chart interaction to allow users to pick what data they want to see. It looks like you are trying to recreate an existing Excel chart which isn't interactive with an interactive technology, so the best thing is likely to rethink how it should be used given the ability to interact due to the shift in technology.