我在React应用程序中使用Chart.js库创建了一个折线图。折线图应用了背景填充,但我遇到了一个问题,填充覆盖了0和第一个数据点之间的y轴边界。我希望边框被绘制在背景色上,这样它就可以被看到。
import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const Graph = ({ chartData, chartColour, chartFillColour }) => {
const options = {
plugins: {
legend: {
display: false,
}
},
scales: {
x: {
grid: {
display: true,
drawBorder: true,
drawOnChartArea: false,
},
ticks: {
display: true,
}
},
y: {
grid: {
display: false,
drawBorder: true,
drawOnChartArea: false,
},
ticks: {
display: true,
}
}
}
}
const data = {
labels: chartData.labels,
datasets: [
{
data: chartData.data,
backgroundColor: chartFillColour,
borderColor: chartColour,
pointRadius: 0,
fill: true,
}
]
}
return chartData.labels ? <Line data={data} options={options}/> : null;
}
export default Graph;
字符串
有没有办法确保边框画在背景色上?任何帮助或建议将不胜感激。谢谢你,谢谢
1条答案
按热度按时间bfhwhh0e1#
您可以将fillerPlugin的drawTime设置为
beforeDraw
,以便它在chart.js绘制任何自己的组件之前绘制填充。https://www.chartjs.org/docs/4.3.0/charts/area.html#configuration
字符串