我正在使用Reaction-chartjs-2库呈现一个单线图，其中的红色和绿色线段表示不同的情况.我已经按照提供的文档和代码示例创建了图表，但我面临的问题是在红色和绿色部分之间有一个意外的差距.尽管try 了各种配置，但差距依然存在.
这是我的代码:
import React from "react";
import { Line } from "react-chartjs-2";
import { Chart as ChartJS, registerables } from "chart.js";
import "chartjs-adapter-moment";
ChartJS.register(...registerables);
const data = [
{
t: 1692691200000,
o: 209.9,
h: 210.5,
c: 210.1,
v: 24849.905,
l: 209.7,
i: 0,
_id: "64e592b6ed350eac66f1279e"
},
{
t: 1692694800000,
o: 210.1,
h: 210.9,
c: 209.8,
v: 17912.358,
l: 209.7,
i: 0,
_id: "64e592b6ed350eac66f1279f"
},
{
t: 1692698400000,
o: 209.8,
h: 210.1,
c: 209.7,
v: 15451.882,
l: 209.3,
i: 0,
_id: "64e592b6ed350eac66f127a0"
},
{
t: 1692702000000,
o: 209.8,
h: 209.8,
c: 209.1,
v: 14630.712,
l: 208.8,
i: 0,
_id: "64e592b6ed350eac66f127a1"
},
{
t: 1692705600000,
o: 209.1,
h: 209.9,
c: 209.2,
v: 14840.568,
l: 209,
i: 0,
_id: "64e592b6ed350eac66f127a2"
},
{
t: 1692709200000,
o: 209.2,
h: 209.4,
c: 206.9,
v: 76291.989,
l: 205.9,
i: 0,
_id: "64e592b6ed350eac66f127a3"
},
{
t: 1692712800000,
o: 207,
h: 207.8,
c: 206.9,
v: 55066.85,
l: 205.9,
i: 0,
_id: "64e592b6ed350eac66f127a4"
},
{
t: 1692716400000,
o: 206.9,
h: 208.1,
c: 205.6,
v: 70269.986,
l: 204.3,
i: 0,
_id: "64e592b6ed350eac66f127a5"
},
{
t: 1692720000000,
o: 205.5,
h: 207.3,
c: 207.2,
v: 107602.133,
l: 203.4,
i: 0,
_id: "64e592b6ed350eac66f127a6"
},
{
t: 1692723600000,
o: 207.1,
h: 207.2,
c: 205.9,
v: 59274.354,
l: 204.9,
i: 0,
_id: "64e592b6ed350eac66f127a7"
},
{
t: 1692727200000,
o: 206,
h: 210.4,
c: 208.8,
v: 81805.016,
l: 204.9,
i: 0,
_id: "64e592b6ed350eac66f127a8"
},
{
t: 1692730800000,
o: 208.8,
h: 209.9,
c: 208.4,
v: 29905.367,
l: 208,
i: 0,
_id: "64e592b6ed350eac66f127a9"
},
{
t: 1692734400000,
o: 208.3,
h: 209.4,
c: 209.3,
v: 18693.145,
l: 208.3,
i: 0,
_id: "64e592b6ed350eac66f127aa"
},
{
t: 1692738000000,
o: 209.3,
h: 209.5,
c: 206.8,
v: 60334.243,
l: 204.7,
i: 0,
_id: "64e592b6ed350eac66f127ab"
},
{
t: 1692741600000,
o: 206.8,
h: 209.4,
c: 208.7,
v: 32667.587,
l: 206.4,
i: 0,
_id: "64e592b6ed350eac66f127ac"
},
{
t: 1692745200000,
o: 208.8,
h: 213,
c: 210.9,
v: 62314.118,
l: 208.7,
i: 0,
_id: "64e592b6ed350eac66f127ad"
},
{
t: 1692748800000,
o: 210.9,
h: 215.6,
c: 213.7,
v: 98698.808,
l: 210.8,
i: 0,
_id: "64e592b6ed350eac66f127ae"
},
{
t: 1692752400000,
o: 213.8,
h: 214.5,
c: 214.1,
v: 19970.85,
l: 213.5,
i: 0,
_id: "64e592b6ed350eac66f127af"
},
{
t: 1692756000000,
o: 214.1,
h: 214.2,
c: 213.4,
v: 18173.768,
l: 213.1,
i: 0,
_id: "64e592b6ed350eac66f127b0"
},
{
t: 1692763200000,
o: 212.6,
h: 213.7,
c: 213.6,
v: 10753.479,
l: 212.3,
i: 0,
_id: "64e592b6ed350eac66f127b1"
},
{
t: 1692766800000,
o: 213.5,
h: 213.7,
c: 213.6,
v: 169.645,
l: 213.5,
i: 0,
_id: "64e592b6ed350eac66f127b2"
},
{
t: 1692770400000,
o: 213.9,
h: 214,
c: 214,
v: 1.285,
l: 213.9,
i: 0,
_id: "64e5a0c81a0fcedd5b1b6393"
},
{
t: 1692774000000,
o: 214.8,
h: 215.3,
c: 215.2,
v: 4903.512,
l: 214.5,
i: 0,
_id: "64e5b1561a0fcedd5b312de7"
},
{
t: 1692777600000,
o: 216.4,
h: 216.4,
c: 216.4,
v: 0,
l: 216.4,
i: 0,
_id: "64e5bce91a0fcedd5b40f590"
},
{
t: 1692781200000,
o: 215.3,
h: 215.3,
c: 215.3,
v: 51.575,
l: 215.3,
i: 0,
_id: "64e5caf71a0fcedd5b5460b9"
}
];
const App = () => {
// Extracting timestamps and values from the data
const timestamps = data.map((entry) => entry.t);
const values = data.map((entry) => entry.c); // Using 'c' for closing prices, change it if needed
console.log("? ~ file: index.tsx:264 ~ ChartComponent ~ values:", values);
// Defining green and red colors for the chart
const greenColor = "rgba(0, 255, 0, 0.6)";
const redColor = "rgba(255, 0, 0, 0.6)";
// Creating datasets for green and red segments
const datasets = [
{
label: "Close",
data: values.map((value) => (value >= values[0] ? value : null)),
borderColor: greenColor,
backgroundColor: greenColor,
fill: false, // Filling area above the line
tension: 0.3,
pointRadius: 0
},
{
label: "Close",
data: values.map((value) => (value < values[0] ? value : null)),
borderColor: redColor,
backgroundColor: redColor,
fill: false, // Filling area below the line
pointRadius: 0,
tension: 0.3
}
];
const chartData = {
labels: timestamps,
datasets: datasets
};
const options = {
scales: {
x: {
display: false // Hide the x-axis
},
y: {
display: false
}
},
plugins: {
legend: {
display: false // Hide the legend
}
}
};
return (
<div>
<Line data={chartData} options={options} />
</div>
);
};
export default App;