reactjs - 谷歌烛台图表上的多条线通过反应

Question

我正在尝试使用 react-google-charts 在同一个图表上创建具有多个线条的蜡烛图。但是当我尝试这是输出：

但这是我想要的图表：

这是我使用的代码：

<Chart
        width={"500px"}
        height={"300px"}
        chartType="ComboChart"
        loader={<div>Loading Chart</div>}
        data={[
          ["day", "a", "b", "c", "d", "Medium", "medium2"],
          ["2004/05", 165, 938, 522, 998, 450, 614.6],
          ["2005/06", 135, 1120, 599, 1268, 288, 682],
          ["2006/07", 157, 1167, 587, 807, 397, 623],
          ["2007/08", 139, 1110, 615, 968, 215, 609.4],
          ["2008/09", 136, 691, 629, 1026, 366, 569.6],
        ]}
        options={{
          seriesType: "CandlestickChart",
          series: {
            1: { type: "line" },
          },
        }}
      />

这些是我已经用来制作这个版本的程序的链接：

• 谷歌烛台图上的多条线
• https://react-google-charts.com/combo-chart
• https://developers.google.com/chart/interactive/docs/gallery/combochart

这是项目：

• https://codesandbox.io/s/peaceful-benz-ldjzu?file=/src/App.js

有没有人可以告诉我我的程序做错了什么？

Answer 1

好的，我能够找到解决问题的方法。这是解决方案：

<Chart
    width={"500px"}
    height={"300px"}
    chartType="CandlestickChart"
    loader={<div>Loading Chart</div>}
    data={[
      ["day", "a", "b", "c", "d", "Medium", "medium2"],
      ["2004/05", 0, 0, 40, 40, 450, 614.6],
      ["2005/06", 135, 1120, 599, 1268, 288, 682],
      ["2006/07", 157, 1167, 587, 807, 397, 623],
      ["2007/08", 139, 1110, 615, 968, 215, 609.4],
      ["2008/09", 136, 691, 629, 1026, 366, 569.6]
    ]}
    options={{
      series: {
        1: { type: "line" },
        2: { type: "line" }
      }
    }}
  />

问题是我使用的是 ComboChart 但在这种情况下我真的不明白为什么它不起作用。使用 CandlestickChart 它可以工作。

我的代码：

• https://codesandbox.io/s/white-tree-2fsy6?file=/src/App.js:139-765