如何在anychart-react npm模块中实现烛台类型来反应项目

Question

我尝试在我的 React 项目中实施 AnyChart React 模块，其中包含日文图表类型，

这是我的组件：

class Graph extends Component {
    render() {
        return (
            <div className="Graph">
                <center>
                    <AnyChart
                        width={960}
                        height={500}
                        type="candlestick"
                        data={[
                              ["2007-07-23", 23.55, 23.88, 23.38, 23.62],
                              ["2007-07-24", 22.65, 23.7, 22.65, 23.36],
                              ["2007-07-25", 22.75, 23.7, 22.69, 23.44],
                              ["2007-07-26", 23.2, 23.39, 22.87, 22.92],
                              ["2007-07-27", 23.98, 24.49, 23.47, 23.49],
                              ["2007-07-30", 23.55, 23.88, 23.38, 23.62],
                              ["2007-07-31", 23.88, 23.93, 23.24, 23.25],
                              ["2007-08-01", 23.17, 23.4, 22.85, 23.25],
                              ["2007-08-02", 22.65, 23.7, 22.65, 23.36],
                              ["2007-08-03", 23.2, 23.39, 22.87, 22.92],
                              ["2007-08-06", 23.03, 23.15, 22.44, 22.97],
                              ["2007-08-07", 22.75, 23.7, 22.69, 23.44]
                        ]}
                        legend="true"
                        title="Simple Data"
                    />
                </center>
            </div>
        )
    }
}

它return

TypeError: anychart[e.type] is not a function
...

在

之后有很大的错误

这是源代码，可能它没有所有参数，但我不知道如何在 jsx 标签中实现下摆，如属性

(https://www.npmjs.com/package/anychart-react)
(https://docs.anychart.com/Basic_Charts/Japanese_Candlestick_Chart)
(https://docs.anychart.com/7.12.0/Basic_Charts_Types/Japanese_Candlestick_Chart)

Answer 1

我建议您使用另一种方法来创建股票图表。您可以定义图表的实例。您可以在下面找到股票图表示例的 JS 和 HTML 代码。

JS

var msftDataTable = anychart.data.table();
msftDataTable.addData(window.get_msft_daily_short_data());
var chart = anychart.stock();
var firstPlot = chart.plot(0);
firstPlot.area(msftDataTable.mapAs({'value': 4})).name('MSFT');

ReactDOM.render(
  <AnyChart
    width={800}
    height={800}
    instance={chart}
    title="Stock demo"
  />, document.getElementById('root'));

HTML

<body>
<div id="root" style="width: 800px; height: 800px"></div>
<script src="stock.min.js"></script>
</body>

其中stock.min.js是编译后的JS代码

如何在anychart-react npm模块中实现烛台类型来反应项目

How to implement candlestick type in anychart-react npm module to react project

reactjs

anychart