React Google Charts 烛台颜色和灯芯不显示

问题描述

我正在尝试实施 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 candlestick。我尝试使用选项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>

解决方法

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

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

但根据 Google 烛台图的 data format，
数据应该结构如下...

"day","close","high"