如何在chart.js及vue-chartjs中应用线性渐变填充？

Chart.js 不支持直接将 CSS 线性渐变字符串作为 backgroundColor 值，需要通过 Canvas 上下文创建渐变对象来实现需求效果，具体操作如下：

1. 初始化图表数据时预留背景色字段 #

先把 datasets 里的 backgroundColor 设为 null，后续再赋值渐变对象：

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: null, // 预留字段
    fill: 'start'
  }]
}

2. 在组件挂载后创建渐变并赋值 #

Vue2 组件示例 #

<template>
  <Line ref="lineChart" :chartData="chartData" :options="chartOptions" />
</template>

<script>
import { Line } from 'vue-chartjs'
import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

export default {
  components: { Line },
  data() {
    return {
      chartData,
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  mounted() {
    // 获取图表实例
    const chart = this.$refs.lineChart.chartInstance
    const ctx = chart.ctx
    // 创建从上到下的线性渐变（对应 CSS 的 180deg）
    const gradient = ctx.createLinearGradient(0, 0, 0, chart.height)
    // 添加渐变颜色节点：0% 为 #7F56D9，95.55% 为透明同色
    gradient.addColorStop(0, '#7F56D9')
    gradient.addColorStop(0.9555, 'rgba(127, 86, 217, 0)')
    // 给数据集设置渐变背景
    this.chartData.datasets[0].backgroundColor = gradient
    // 更新图表
    chart.update()
  }
}
</script>

Vue3 组合式 API 示例 #

<template>
  <Line ref="lineChart" :chartData="chartData" :options="chartOptions" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Line } from 'vue-chartjs'
import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

const lineChart = ref(null)
const chartData = ref({ /* 此处填入你的图表数据 */ })
const chartOptions = ref({ responsive: true, maintainAspectRatio: false })

onMounted(() => {
  const chart = lineChart.value.chartInstance
  const ctx = chart.ctx
  const gradient = ctx.createLinearGradient(0, 0, 0, chart.height)
  gradient.addColorStop(0, '#7F56D9')
  gradient.addColorStop(0.9555, 'rgba(127, 86, 217, 0)')
  chartData.value.datasets[0].backgroundColor = gradient
  chart.update()
})
</script>

3. 响应式适配（可选） #

如果图表需要适配窗口大小变化，可监听 resize 事件重新生成渐变：

mounted() {
  // 原有代码...
  window.addEventListener('resize', () => {
    const gradient = ctx.createLinearGradient(0, 0, 0, chart.height)
    gradient.addColorStop(0, '#7F56D9')
    gradient.addColorStop(0.9555, 'rgba(127, 86, 217, 0)')
    this.chartData.datasets[0].backgroundColor = gradient
    chart.update()
  })
}

内容的提问来源于stack exchange，提问作者Oleksandr