为react-chartjs-2添加渐变背景

3yhwsihp  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(214)

我目前正在尝试在react组件中为雷达图添加一个稍微透明的渐变背景。我只能通过在html文件中引用chartjs画布来找到这个问题的解决方案,但通过tsx/jsx文件中的react组件却没有找到解决方案。
我正在寻找的Desired Result,以及Current Result
下面的代码用于实现当前结果。

  1. import { Chart } from 'react-chartjs-2';
  2. import { Chart as ChartJS, LineController, LineElement, PointElement, LinearScale, Title, Filler, RadialLinearScale } from 'chart.js';
  3. ChartJS.register(LineController, RadialLinearScale, LineElement, PointElement, LinearScale, Filler, Title);
  4. const labels = ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5', 'Thing 6'];
  5. const chartData = [5, 3, 4, 5, 2, 4];
  6. const data = {
  7. labels: labels,
  8. datasets: [
  9. {
  10. data: chartData,
  11. fill: true,
  12. backgroundColor: 'pink',
  13. borderColor: 'transparent',
  14. pointBorderColor: 'transparent',
  15. pointBackgroundColor: 'transparent',
  16. },
  17. ],
  18. };
  19. const options = {
  20. scales: {
  21. r: {
  22. grid: {
  23. lineWidth: 2,
  24. },
  25. angleLines: {
  26. lineWidth: 2,
  27. },
  28. gridLines: {
  29. display: false
  30. },
  31. ticks: {
  32. display: false,
  33. maxTicksLimit: 1
  34. },
  35. }
  36. }
  37. }
  38. const RadarGraph = () => {
  39. return (
  40. <Chart type="radar" data={data} options={options}/>
  41. )
  42. }
  43. export default RadarGraph;
ohfgkhjo

ohfgkhjo1#

您将需要为backgroundColor使用一个可脚本化的函数,该函数包含图表,该图表包含如下所示的上下文:

  1. const data = {
  2. labels: labels,
  3. datasets: [
  4. {
  5. data: chartData,
  6. fill: true,
  7. backgroundColor: ({chart: {ctx}}) => {
  8. const bg = ctx.createLinearGradient(paramters);
  9. // More config for your gradient
  10. return bg;
  11. }
  12. },
  13. ],
  14. };

相关问题