google-visualization - 按组排列的柱形堆积图

Question

我有一个柱形图，显示当前和前几年的功耗。现在这种消耗来自不同的来源，所以我想在多个列中绘制这些值，以显示堆叠值。

我正在使用谷歌图表，但在选项数组中设置isStacked参数true只是堆叠特定行的每个值。我想要实现的是这样的：

也就是说，具有多个堆叠列的行。这甚至可以通过 Google Chart API 实现吗？

Answer 1

这是可行的：

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}}
      );
}

这可能不是这样做的好方法。基本上，您正在尝试使单个图表显示太多信息，并且最好将数据拆分为多个图表。例如，您可以使用域角色，或者您可以只使用折线图来比较卡车和汽车之间的差异（由于基线不同，您目前无法这样做）。您还可以将不同国家的汽车或卡车作为标准柱形图（未堆叠）进行比较。您可以使用图表交互允许用户选择他们想要查看的数据。看起来您正在尝试重新创建与交互式技术不交互的现有 Excel 图表，因此最好的办法可能是重新考虑由于技术转变而具有交互能力的情况下应该如何使用它。