如何为折线图添加渐变背景 [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

我希望这有帮助。

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