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()方法中，然后添加渐变。或尝试使用计算属性

vue js条形图渐变颜色未显示

1 个答案: