我目前正在尝试在react组件中为雷达图添加一个稍微透明的渐变背景。我只能通过在html文件中引用chartjs画布来找到这个问题的解决方案,但通过tsx/jsx文件中的react组件却没有找到解决方案。
我正在寻找的Desired Result,以及Current Result
下面的代码用于实现当前结果。
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, LineController, LineElement, PointElement, LinearScale, Title, Filler, RadialLinearScale } from 'chart.js';
ChartJS.register(LineController, RadialLinearScale, LineElement, PointElement, LinearScale, Filler, Title);
const labels = ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5', 'Thing 6'];
const chartData = [5, 3, 4, 5, 2, 4];
const data = {
labels: labels,
datasets: [
{
data: chartData,
fill: true,
backgroundColor: 'pink',
borderColor: 'transparent',
pointBorderColor: 'transparent',
pointBackgroundColor: 'transparent',
},
],
};
const options = {
scales: {
r: {
grid: {
lineWidth: 2,
},
angleLines: {
lineWidth: 2,
},
gridLines: {
display: false
},
ticks: {
display: false,
maxTicksLimit: 1
},
}
}
}
const RadarGraph = () => {
return (
<Chart type="radar" data={data} options={options}/>
)
}
export default RadarGraph;
1条答案
按热度按时间ohfgkhjo1#
您将需要为backgroundColor使用一个可脚本化的函数,该函数包含图表,该图表包含如下所示的上下文: