google 烛台图表上的多条线反应

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://codesandbox.io/s/peaceful-benz-ldjzu?file=/src/App.js

有谁能告诉我我的程序哪里做错了吗？

Answer 1

好的，我找到了我的解决方案 problem.This 是解决方案：

<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

google 烛台图表上的多条线反应

Multiple lines over google candlestick chart by react

candlestick-chart

reactjs

react-google-charts