用于双 Y 堆叠条形图的 react-google-charts

Question

我正在尝试构建下面的条形图。

我的数据格式为：

[ month , region , totalSalesForCompanyA, totalSalesForCompanyB ]

我可以成功构建以下图表：

• 双 Y 的条形图，其中 X 轴上我有月份，然后每个 Y 维度是每个公司的总和。
• 上面的堆积条形图，其中每个公司都有 1 个 Y 轴维度

我想要的是结合以上内容并包含区域。所以最终目标是：

• 在我的 X 轴上：月份时间轴
• 2 Y 轴尺寸：A 公司和 B 公司的总和
• 以及要根据区域叠加的每个总和。

使用react-google-charts 可以吗？我正在阅读ComboChart，但我不确定这是否是我需要的。使用条形图看起来不太可能。

对没有代码的帖子表示歉意 - 如果 ComboChart 确实是要使用的代码示例，将添加代码示例。谢谢！

编辑：我发现react-vis 有一些东西：uber.github.io/react-vis/examples/showcases/plots -> Clustered Stacked Vertical Bar Series - 想知道谷歌图表是否有类似的东西

编辑 2：

我正在寻找这样的东西：

所以在 X 轴上有一个维度 - 四分之一。 然后有 2 个 Y 列 - 每个都是堆叠的。这 2 个 Y 列并排显示。

Answer 1

谷歌图表中可以有多个堆栈。
但它只能使用 google 的 material 条形图，
使用经典条形图/柱形图是不可能的。

经典 = google.visualization.ColumnChart & package = 'corechart'
材料 = google.charts.Bar & package = 'bar'

材质图表的问题，有几个选项不受支持，
可以在这里找到...
Tracking Issue for Material Chart Feature Parity #2143

---

对于初学者来说，数据表的结构需要如下...
对于两个并排的堆栈，数据表中需要 5 列。
首先是 x 轴，其余四个用于两个堆栈。

['Qtr', 'Stack 1 - Apples', 'Stack 1 - Oranges', 'Stack 2 - Apples', 'Stack 2 - Oranges'],
['Q1', 500, 1200, 816, 200],
['Q2', 163, 231, 539, 594],
['Q3', 125, 819, 200, 578],
['Q4', 197, 536, 613, 500]

接下来，为了获得多个堆栈，我们需要将“堆栈 2”移动到单独的 y 轴。
这可以在选项中完成，使用series[series number].targetAxisIndex

series: {
  2: {  // third data table column -- 'Stack 2 - Apples'
    targetAxisIndex: 1
  },
  3: {  // fourth data table column -- 'Stack 2 - Oranges'
    targetAxisIndex: 1
  }
},

默认的 y 轴是轴索引 0，而第二个 y 轴是索引 1
堆栈 2 需要设置为相同的第二个轴

以下是一个工作示例（虽然没有反应）...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Quarter');
  data.addColumn('number', 'Stack 1 - Apples');
  data.addColumn('number', 'Stack 1 - Oranges');
  data.addColumn('number', 'Stack 2 - Apples');
  data.addColumn('number', 'Stack 2 - Oranges');
  data.addRows([
    ['Q1', 500, 1200, 816, 200],
    ['Q2', 163, 231, 539, 594],
    ['Q3', 125, 819, 200, 578],
    ['Q4', 197, 536, 613, 500]
  ]);

  var options = {
    chart: {
      title: 'Multiple Stacks'
    },
    height: '100%',
    isStacked: true,
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      }
    },
    width: '100%'
  };

  var container = document.getElementById('chart');
  var chart = new google.charts.Bar(container);

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

注意：对于 material 图表，您应该始终在绘制图表之前转换选项，参见上面的示例...

google.charts.Bar.convertOptions(options)