如何应用线性渐变来填充chart.js

nlejzf6q 于 2023-06-22 发布在 Chart.js

关注(0)|答案(2)|浏览(199)

我使用chart.js和vue-chartjs
我需要用梯度使填充（start）：

linear-gradient(180deg, #7F56D9 0%, rgba(127, 86, 217, 0) 95.55%);

喜欢这个image
我的配置

const chartData = {
labels: ['2022-01','2022-02','2022-03','2022-04','2022-05','2022-06','2022-07', '2022-08','2022-09', '2022-10', '2022-11', '2022-12'],
datasets: [
    {
        label: 'Dataset 1',
        data: [420,430,680,560,790,240,395,830,810, 430, 500, 700],
        borderColor: '#7F56D9',
        borderWidth: 2,
        backgroundColor: '#7F56D9',
        fill: 'start'
    }
]

}

chart.js

来源：https://stackoverflow.com/questions/76368745/how-can-i-apply-a-linear-gradient-to-fill-in-chart-js

2条答案

按热度按时间

um6iljoc1#

画布上的渐变使用canvas.createLinearGradient()创建
你需要为backgroundColor做这样的事情：

datasets: [
    {
      label: 'Dataset 1',
      data: [420, 430, 680, 560, 790, 240, 395, 830, 810, 430, 500, 700],
      borderColor: '#7F56D9',
      borderWidth: 2,
      fill: 'start',
      backgroundColor: (ctx) => {
        const canvas = ctx.chart.ctx;
        const gradient = canvas.createLinearGradient(0, -160, 0, 120);
        gradient.addColorStop(0, '#7F56D9');
        gradient.addColorStop(1, '#fff');
        return gradient;
      },
    },
  ],

这是我最接近你的形象了。
CSS linear-gradient和canvas createLinearGradient并不相关，也没有1：1的转换（据我所知），所以你只需要摆弄数字，直到你得到一个接近你想要的渐变。

展开查看全部

赞(0）回复(0）举报 2023-06-22

rqdpfwrv2#

解决方案：

backgroundColor: (context) => {
            const ctx = context.chart.ctx;
            const gradient = ctx.createLinearGradient(0, 0, 0, 200);
            gradient.addColorStop(0, "rgba(127,86,217,0.1)");
            gradient.addColorStop(1, "rgba(127, 86, 217, 0)");
            return gradient;
        }

赞(0）回复(0）举报 2023-06-22

我来回答

如何应用线性渐变来填充chart.js

2条答案

相关问题

热门标签

最新问答