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: "-sharpF64A32",
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
})
}
each click event passes a new array into the linechart, causing a canvas to be redrawn each time. The previous table will be displayed when the mouse is moved over the table. I tried to clear the data every time I passed the value, but it still didn"t work at that time. How can I make him overwrite the previous one every time he draws it?