React Google 图表烛台颜色和灯芯未显示

Question

我正在尝试实现 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}

灯芯也没有显示在图表上，即使我的数据符合默认示例数据的相同形状。

我正在链接到显示我的图表的 codesandbox。

没有任何灯芯且所有蜡烛颜色相同的图表如下所示

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

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

<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>

Answer 1

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

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

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

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

React Google 图表烛台颜色和灯芯未显示

React Google Charts Candlestick colors and wicks not displaying

javascript

reactjs

charts

candlestick-chart

react-google-charts