对于正值和负值，我使用了chartjs和reaction-chartjs-2折线图，对于正值，我希望填充区域为绿色，而负值区域为红色.
https://codesandbox.io/p/devbox/recursing-drake-v2rsj7个
import React from "react";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Filler,
Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";
import faker from "faker";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Filler,
Legend,
);
export const options = {
responsive: true,
plugins: {
legend: {
display: false,
position: "top" as const,
},
title: {
display: false,
text: "Chart.js Line Chart",
},
},
scales: {
x: {
grid: {
display: false, // Hides X-axis grid lines
},
ticks: {
display: false, // Hides X-axis labels
},
border: {
display: false, // Hides X-axis border line
},
},
y: {
grid: {
display: false, // Hides Y-axis grid lines
},
ticks: {
display: false, // Hides Y-axis labels
},
border: {
display: false, // Hides X-axis border line
},
},
},
};
const generateChartData = () => {
const values = [3000, 4000, -1000, -2000, 2000, 3000, 5000];
const backgroundColors = values.map((val) =>
val >= 0 ? "rgba(50, 183, 73, 0.2)" : "rgba(212, 68, 90, 0.2)",
);
return {
labels: [
"Page A",
"Page B",
"Page C",
"Page D",
"Page E",
"Page F",
"Page G",
],
datasets: [
{
label: "Dataset 1",
data: values,
fill: true,
backgroundColor: backgroundColors,
borderColor: "rgb(75, 192, 192)",
tension: 0.4,
},
],
};
};
export function App() {
const data = generateChartData();
return <Line options={options} data={data} />;
}
This is current result
这是预期的结果
