javascript - vue js条形图渐变颜色不显示

Question

我正在为图表使用 vue-chartjs

这是我的 BarChart.js

import {Bar} from 'vue-chartjs'

export default {
  extends: Bar,
  data () {
  return {
    gradient: null,
    gradient2: null,
    datacollection: {
    labels: ['January', 'February','March'],
    datasets: [
      {
        label: 'Data One',
        backgroundColor: this.gradient,
        data: [40,42,99]
      },                    
    ]}
   }
  },
 mounted () {
  this.gradient = 
  this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 400);  
  this.gradient.addColorStop(0, 'rgba(250,274,50,1)');   
  this.gradient.addColorStop(1, 'rgba(250,174,50,0)');


  console.log(this.$refs.canvas.getContext('2d'));
  this.renderChart(this.datacollection, {responsive: true, 
  maintainAspectRatio: false})
  }
}

这是我的 Vue

<template>
   <v-flex sm6>
      <bar-chart></bar-chart>
   </v-flex>
</template>

<script>
  import BarChart from './BarChart.js';
  export default {
     components: {
         BarChart
     },
    data() {
        return {
            datacollection: null
        }
    },
  }
</script>

<style>
</style>

但我看不到渐变，所以我做console.log了this.$refs.canvas.getContext('2d')，它正确引用了条形图，但填充样式不是它显示的 canvasgradient

CanvasRenderingContext2D

canvas:canvas#bar-chart

fillStyle:"#000000"

Answer 1

那么你不能在 vue.js 的数据属性中引用数据属性

data: () => ({
 data1: '1',
 data2: this.data1
})

这行不通。

您可以将数据集合直接放在renderChart()方法中，然后添加渐变。或者尝试使用计算属性