Javascript 如何在Vue应用程序中更新图表js?
我有一些图表,我想通过点击按钮来更新它。存储中的数据更改,但UI不更新Javascript 如何在Vue应用程序中更新图表js?,javascript,vue.js,Javascript,Vue.js,我有一些图表,我想通过点击按钮来更新它。存储中的数据更改,但UI不更新 <div class="graph"> <button class="click" @click="changeUi">Change chart</button> <canvas id="mix" count="2"></canvas> <chartjs-line target="mix
<div class="graph">
<button class="click" @click="changeUi">Change chart</button>
<canvas id="mix" count="2"></canvas>
<chartjs-line target="mix"></chartjs-line>
<chartjs-bar :option="{legend: { display: false }}"
:labels="mylabels":datasets="mydatasets" target="mix"></chartjs-bar>
</div>
export default {
data(){
return{
mydatasets:[{
data: this.$store.state.data}], //This data i want to change
//data: [20, 50, 20, 41, 26, 15, 20, 10, 29, 5, 33, 55]
methods:{
changeUi(){
this.$store.commit('changeChart')
// I want change by this array [10, 30, 34, 23, 11, 15, 55, 30, 19, 35, 43, 21]
}
}
}
存储属性应在组件中用作计算属性,而不是在数据内部
import 'chart.js'
import 'hchs-vue-charts'
Vue.use(window.VueCharts);