react-chartjs-2 蜡烛图

Question

如何在

react-chartjs-2

上实现蜡烛图？这是我的代码：

import "chartjs-chart-financial";
import React from "react";
import { Chart } from "react-chartjs-2";

const CandlestickChart = () => {
    const data = {
        datasets: [
            {
                type: "candlestick",
                label: "Candlestick Chart",
                data: [{ t: new Date("2023-08-01"), o: 100, h: 120, l: 90, c: 110 }],
                borderColor: "rgba(255, 99, 132, 1)",
                borderWidth: 2
            }
        ]
    };

    return <Chart type="candlestick" data={data} />;
};

export default CandlestickChart;

这是我收到的错误：

Error: "candlestick" is not a registered controller.

我已经仔细检查了是否安装了

chartjs-chart-financial

。它位于node_modules 内部。我将所有相关软件包都升级到了最新版本。

Answer 1

npm install react react-chartjs-2 chartjs-chart-financial

并导入

import "chartjs-chart-financial";