如何向折线图添加渐变背景 [vue-chart.js]

Question

如何向折线图添加渐变背景颜色，我将数据作为道具传递。

这是我的 LineChart.vue 组件：

import { Line, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins

  export default {
    extends: Line,
    mixins: [reactiveProp],
    data: () => ({
      gradient: null,
      options: {
        layout: {
          padding: {
            bottom: -20,
            left: -20,
          }
        },
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              min: 0,
              display: false,
            },
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
          }],
          xAxes: [{
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
            ticks: {
              display: false
            }
          }]
        }
      }
    }),
    mounted () {
      // this.chartData is created in the mixin.
      // If you want to pass options please create a local options object.

      this.renderChart(this.chartData, this.options)
    }
  }

这是 Home.vue 中的图表数据初始化：

    this.chartdata3 = {
      labels: ['bla', 'bla', 'bla', 'bla'],
      datasets: [
        {
          backgroundColor: "rgba(42, 115, 237, 0.9)",
          data: ['200', '400', '100', '700'],
        }
      ]
    };

如何在折线图的背景中使用渐变而不是纯色？

Answer 1

您应该能够添加ref="chart"到您的canvas. 之后，您可以声明将存储背景颜色的新变量。

像这样：

var gradientFill = this.$refs.chart.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFill.addColorStop(1, "rgba(244, 144, 128, 0.6)");

然后您应该能够backgroundColor: gradientFill在图表选项中使用。

请根据需要将此代码放入 Vue 生命周期中created或mounted方法中，以确保组件显示时正确呈现。

应该是这样。

您可以在这里尝试使用它： https: //codepen.io/plavookac/pen/RKjNEV

我希望这有帮助。

如果您有任何疑问，请告诉我。