各位
我正在将 react-chartjs-2 从v2迁移到v5,但是,这是我的代码,我丢失了渐变颜色,这在v5中不起作用。并且无法找出错误或遗漏了什么。我正在分享代码。请帮助我解决这个问题。
这是我的v2代码|旧码
import React from 'react';
import { Line as LineChart } from 'react-chartjs-2';
import { formatCurrency } from './../util';
const DashboardChart = ({ salesData }) => {
const chartLabels = salesData.map(sale => sale.date);
const chartValues = salesData.map(sale => sale.amount);
const chartData = canvas => {
const ctx = canvas.getContext('2d');
var gradientFill = ctx.createLinearGradient(
0,
0,
0,
250
);
gradientFill.addColorStop(0, 'rgba(0, 97, 215, 0.3)');
gradientFill.addColorStop(1, 'rgba(0, 200, 255, 0)');
console.log(gradientFill)
return {
labels: chartLabels,
datasets: [
{
label: 'Sales',
borderColor: '#3182ce',
data: chartValues,
backgroundColor: gradientFill
}
]
};
};
return (
<LineChart
height={100}
data={chartData}
options={{
elements: {
line: {
tension: 0.3,
borderWidth: 1.5
},
point: { radius: 0 }
},
scales: {
yAxes: [
{
ticks: {
callback: value => formatCurrency(value)
}
}
]
}
}}
/>
);
};
export default DashboardChart;
这是我的v5代码|最新代码
import React, { useEffect, useRef } from 'react';
import { Line } from 'react-chartjs-2';
import { formatCurrency } from '../util';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler
} from 'chart.js';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler
);
const useCanvasGradient = (canvasRef, chartValues) => {
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas?.getContext('2d');
if (ctx) {
const gradientFill = ctx.createLinearGradient(0, 0, 0, 250);
gradientFill.addColorStop(0, 'rgba(0, 97, 215, 0.3)');
gradientFill.addColorStop(1, 'rgba(0, 200, 255, 0)');
ctx.fillStyle = gradientFill;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Set the background color of the chart to the canvas pattern
chartValues.backgroundColor = ctx.createPattern(canvas, 'repeat');
}
}, [canvasRef, chartValues]);
};
const DashboardChart = ({ salesData }) => {
const chartLabels = salesData.map(sale => sale.date);
console.log(JSON.stringify(chartLabels))
const chartValues = {
label: 'Sales',
borderColor: '#3182ce',
data: salesData.map(sale => sale.amount),
};
console.log(JSON.stringify(chartValues))
const canvasRef = useRef(null);
useCanvasGradient(canvasRef, chartValues);
const chartData = {
labels: chartLabels,
datasets: [chartValues],
};
const options = {
responsive: true,
elements: {
line: {
tension: 0.3,
borderWidth: 1.5,
},
point: { radius: 0 },
},
scales: {
y: {
ticks: {
callback: value => formatCurrency(value),
},
},
},
};
return (
<>
<canvas ref={canvasRef} id="canvasId" width={500} height={500} style={{ display: 'none' }} />
<Line
height={100}
data={salesData ? chartData : null}
options={options}
/>
</>
);
};
export default DashboardChart;
我也分享v2和v5的截图
v2截图x1c 0d1x
这里是v5截图
Also sharing live code URL🔗
这里是另一个活生生的例子,只是重新验证了我使用的颜色是正确的或不使用vanilaJS -Live Example
2条答案
按热度按时间lnlaulya1#
const chartValues = { ...props,fill:真}
j9per5c42#
我已经解决了这个问题,这是我的代码live Example
我分享这个,因为如果有人从v2升级到v5,这可能会帮助他/她。
谢谢