Question

我想将第一个元素的背景更改为这种颜色：线性梯度（178.18deg，＃FD749B -13.56％，＃281AC8 158.3％）;

var myChart = new Chart(ctx, {
  type: "doughnut",
  data: {
    datasets: [
      {
        data: countArr,
        backgroundColor: ["#F933FF", "#F9A9C6"],
        borderWidth: 0
      }
    ]
  },
  options: {
    cutoutPercentage: 75,
    tooltips: {
      callbacks: {
        label: ""
      }
    }
  }
});

我尝试这样做：backgroundColor: ["linear-gradient(178.18deg, #FD749B -13.56%, #281AC8 158.3%)", "#F9A9C6"],不走运。

Answer 1

您可以按照以下方式创建渐变：

var gradient = ctx.createLinearGradient(0, 0, 0, 450);
gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)');
gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');

并将gradient var添加到数据集背景色：

datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: gradient,
      borderWidth: 1
    },
]

请检查fiddle

编辑：要使第二个元素成为纯色，只需设置数组：

backgroundColor: [gradient1,'#F933FF'],//1st gradient 2nd '#F933FF'

选中this fiddle

如何在ChartJS上将甜甜圈颜色更改为线性渐变？

1 个答案: