react-google-双 Y 堆叠条形图的图表

Question

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

我的数据格式为：

[ month , region , totalSalesForCompanyA, totalSalesForCompanyB ]

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

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

我要的是把上面结合起来，包含region。所以最终目标是：

在我的 X 轴上：月份时间轴
2 Y 轴维度：公司 A 和公司 B 的总和
并且这些总和中的每一个都将根据区域进行叠加。

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

对没有代码表示歉意post - 如果 ComboChart 确实需要，将添加代码示例。谢谢！

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

编辑 2：

我正在寻找这样的东西：

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

Answer 1

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

经典=google.visualization.ColumnChart&套餐='corechart'
material=google.charts.Bar&包='bar'

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

对于初学者来说，数据table需要按如下方式构建...
对于两个堆栈 side-by-side，您将需要数据 table.
中的 5 列首先是x-axis，剩下的四个为两叠。

['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-axis。
这可以在选项中完成，使用 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-axis是轴索引0，而第二个y-axis是索引1
stack 2需要设置成一样的，second axis

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

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)

react-google-双 Y 堆叠条形图的图表

react-google-charts for dual-Y stacked bar charts

charts

google-visualization

typescript

reactjs

react-google-charts