如何在 chartjs 中呈现多个图表?
how can I render multiple charts in chartjs?
这些是我必须在反应中使用 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,
]
您正在寻找的是渲染多个数据集,为此您应该将 date
放入 labels
数组中,将其他数据数组放入 datasets
数组中一个单独的对象。
我尝试使用您的数据实施示例是一个沙箱 https://codesandbox.io/s/react-chartjs-forked-flj74
您可以根据需要重新格式化日期
这些是我必须在反应中使用 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,
]
您正在寻找的是渲染多个数据集,为此您应该将 date
放入 labels
数组中,将其他数据数组放入 datasets
数组中一个单独的对象。
我尝试使用您的数据实施示例是一个沙箱 https://codesandbox.io/s/react-chartjs-forked-flj74
您可以根据需要重新格式化日期