0

这些是我必须在 react 中使用 chartjs 渲染的数据。我制作了一个自定义组件来重新绘制图表，它对于单线图可以正常工作，不能只在这里渲染多线图。

这是我的 Chartjs 自定义组件

import React, { useRef, useEffect } from "react";

import Chart from "chart.js";

const ChartComponent = ({ data, label, min, max }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvasObj = canvasRef.current;
        const context = canvasObj.getContext("2d");

        new Chart(context, {
            type: "line",
            data: {
                datasets: [
                    {
                        label: label,
                        backgroundColor: "transparent",
                        data: data,
                    },
                ],
            },
            options: {
                scales: {
                    xAxes: [
                        {
                            type: "time",
                            distribution: "linear",
                            time: {
                                unit: "month",
                                displayFormats: {
                                    quarter: "YYYY mm dd",
                                },
                            },
                        },
                    ],
                    yAxes: [
                        {
                            ticks: {
                                suggestedMax: max,
                                suggestedMin: min,
                            },
                        },
                    ],
                },
            },
        });
    }, [data, label, min, max]);

    return <canvas ref={canvasRef}> </canvas>;
};

export default ChartComponent;

这些是我要在图表上呈现的数据，每个数组都必须在图表上成行。“敢”数组将成为我的 xAxes，其他列将成为我的 yAxes

const date = [
1370,
1371,
1372,
1373,
1374,
1375,
1376,
1377,
1378,
1379,
1380,
1381,
1382,
1383,
1384,
1385,
1386,
1387,
1388,
1389,
1390,
1391,
1392,
1393,
1394,
1395,
1396,
1397,
1398,
1399,
]

const level = [
1275.77,
1274.73,
1273.83,
1273.41,
1273.65,
1273.5,
1273.28,
1272.83,
12732.83,
1271.6,
1271.6,
1271.36,
1271.01,
1270.67,
1270.4,
1270.15,
1270.08,
1270.54,
1270.32,
1270.27,
1271.3,
1271.27,
]

const area = [
4753.37,
5039.93,
5391.36,
5723.07,
5724.38,
5724.38,
5643.3,
5498.31,
4978.31,
4544.5,
4215.19,
4070.4,
4148.57,
4099.62,
4028.18,
3794.98,
3794.98,
3436.8,
3029.65,
2869.53,
2583.24,
2196.58,
1880.42,
1525.59,
1404.46,
2047.49,
1783.47,
1722.87,
2828.37,
2807.79,
]

const volume = [
21010,
22150,
26910,
30710,
30770,
30770,
29010,
27990,
21500,
16540,
12580,
10840,
11830,
11210,
10310,
8550,
8550,
6120,
4320,
3610,
2640,
1840,
1290,
860,
750,
1560,
1140,
1050,
3430,
3350,
]
4

1 回答 1

1

您正在寻找的称为渲染多个数据集，为此您应该将date内部labels数组和其他数据数组放入datasets数组中，每个数组都放在一个单独的对象中。我尝试使用您的数据实现一个示例是一个沙箱https://codesandbox.io/s/react-chartjs-forked-flj74 您可以根据需要重新格式化日期

于 2021-03-31T13:32:15.467 回答