1

我正在尝试实现 React Google Charts 烛台图表，并且我将自己的数据插入到图表中，但是当显示图表时，即使我更改颜色选项，烛台也一次以一种颜色显示。

options={{
        legend: "none",
        bar: { groupWidth: "100%" }, // Remove space between bars.
        candlestick: {
          fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red
          risingColor: { strokeWidth: 0, fill: "#0f9d58" } // green
        }
      }}

我几乎可以肯定我的数据形状正确（这是传递给图表数据属性的数组的 ordered_data 数组。

  data={this.state.ordered_data}

即使我的数据与默认示例数据的形状相同，灯芯也不会显示在图表上。

我正在链接到显示我的图表的代码框。

没有任何灯芯且所有蜡烛颜色相同的图表如下所示 在此处输入图像描述

下面嵌入了带有图表代码的代码框。这是使用此图表的官方示例：React Google Charts 烛台。我尝试使用选项fallingColor 和risingColor 设置自定义颜色无济于事。我怎样才能让灯芯显示出来？

您可以在代码框的控制台中查看我的数据的形状。 

<iframe src="https://codesandbox.io/embed/charming-oskar-15lkf?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="charming-oskar-15lkf" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

4

1 回答 1

1

查看代码沙箱和控制台中的数据，
看起来您的数据结构如下......

"day", "open", "high", "low", "close"

但根据谷歌烛台图的数据格式
， 数据的结构应该如下......

"day", "low", "open", "close", "high"
于 2020-12-28T23:54:52.643 回答