chartjs 为什么会重复绘制

Question

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props:{
    LineChartdata:{
      type:Array,
    },
    LineChartDate:{
      type:Array,
    }
  },
  methods:{
    setChart(){
      this.renderChart({
        labels: this.LineChartDate,
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#F64A32',
            data: this.LineChartdata,

          }
        ]
      },this.options)
    }

  },
    mounted () { },
    watch:{
      LineChartdata(newV){
        this.setChart(newV);

      }
    }
}

example.vue

<template>
<line-chart :width="370" :height="246" :LineChartdate="LineChartdate" :LineChartdata="LineChartdata"></line-chart>
</template>
<script>
import LineChart from './vue-chartjs/LineChart'
export default {
components: {
      LineChart
    },
},
data () {
  return {
    LineChartdata:[],
    LineChartDate:[]
  }
},
    methods:{
      getdata(){
        var user_id = this.getcookies('user_id');
          this.$http.post('http://example.com',{
            //post body
            user_id:user_id
          },{headers:{
            'datatoken':data_token,            
          }}).then((data)=>{
            //success
            this.LineChartdata=data.data
            this.Linechartdate=data.date
          })
        }

每次点击事件会给linechart中传入一个新的数组，导致每次都会重新绘制一个canvas。鼠标在表格上移动的时候会显示之前的表格。我尝试过每次传值都清空数据，当时还是不行，怎么让他每次绘制都覆盖掉之前的呢？

Answer 1

你数组时如何操作的?把代码贴全了

Answer 2

this.LineChartdata = [];
this.LineChartDate = [];
每次要置空

Answer 3

我也遇到这个问题，请问解决了吗