如何在 chartjs 中呈现多个图表？

问题描述

这些是我必须在 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,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.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,5643.3,5498.31,4978.31,4544.5,4215.19,4070.4,4148.57,4099.62,4028.18,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,29010,27990,21500,16540,12580,10840,11830,11210,10310,8550,6120,4320,3610,2640,1840,1290,860,750,1560,1140,1050,3430,3350,]

解决方法

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