Применить градиент к графику vue. js

Question

Я пытаюсь применить градиент к цвету фона, но я его не применяю. Я сделал, как я видел в нескольких уроках, и даже при этом он не применяет градиент.

Сначала я создал вычисляемое значение для изменения градиента по мере необходимости. Доступ к этому вычисляется через «данные», которые возвращают значение градиента, которое будет использоваться для переменной.

И, наконец, я создал 3 метода «changeDados», который заключается в нажатии на кнопку, чтобы изменить значения graph, 'changeTema', которая предназначена для переключения между темной и светлой темами, и 'fillData', которая является исходной функцией vuechart для применения значений на графике.

код

  computed: {
    colorGradient() {
      var gradientFill = this.$refs.canvas
        .getContext("2d")
        .createLinearGradient(0, 500, 0, 100);
      gradientFill.addColorStop(0, "rgba(63, 255, 243, 0.4)");
      gradientFill.addColorStop(1, "rgba(89, 198, 184, 0)");
      return gradientFill;
    }
  },

  data() {
    return {
      gradient: this.colorGradient
    };
  }

methods: {
    changeDados() {
      var change = new Array();
      change = [
        3000,
        8000,
        1000,
        6000,
        1000,
        6000,
        5000,
        9000,
        1000,
        1000,
        2000,
        3000,
        4000,
        3000,
        6000,
        7000,
        2000,
        4000,
        1000,
        2000,
        3000,
        4000,
        3000,
        6000,
        7000,
        2000,
        4000
      ];
      this.dadosGraph = change;

      this.datacollection = {
        labels: this.datasGraph,
        datasets: [
          {
            borderColor: "#3CFFD0",
            borderWidth: 2,
            pointHoverBorderWidth: 5,
            pointBorderColor: "#3CFFD0",
            pointBackgroundColor: "#3CFFD0",
            pointHoverBackgroundColor: "#3CFFD0",
            pointHoverBorderColor: "#3CFFD0",
            backgroundColor: this.gradient,
            data: this.testeDados
          }
        ]
      };
    },
    mudarTema() {
      if (localStorage.getItem("theme") == "dark") {
        this.datacollection = {
          labels: this.datasGraph,
          datasets: [
            {
              borderColor: "#3CFFD0",
              borderWidth: 2,
              pointHoverBorderWidth: 5,
              pointBorderColor: "#3CFFD0",
              pointBackgroundColor: "#3CFFD0",
              pointHoverBackgroundColor: "#3CFFD0",
              pointHoverBorderColor: "#3CFFD0",
              backgroundColor: this.gradient,
              data: this.testeDados
            }
          ]
        };
      }
      if (this.themeValue == "light") {
        this.datacollection = {
          labels: this.datasGraph,
          datasets: [
            {
              borderColor: "#3CFFD0",
              borderWidth: 2,
              pointHoverBorderWidth: 5,
              pointBorderColor: "#3CFFD0",
              pointBackgroundColor: "#3CFFD0",
              pointHoverBackgroundColor: "#3CFFD0",
              pointHoverBorderColor: "#3CFFD0",
              backgroundColor: this.gradient,
              data: this.testeDados
            }
          ]
        };
      }
    },

    fillData() {
      this.mudarTema();
    }
  }

шаблон