Javascript 如何使用VueJS和ChartJS更新图表
我正在尝试使用VueJS和ChartJS更新图表,到目前为止,我可以访问对象的每个属性,但如果我尝试更改对象的属性,则会出现错误:Javascript 如何使用VueJS和ChartJS更新图表,javascript,node.js,vue.js,chart.js,vue-chartjs,Javascript,Node.js,Vue.js,Chart.js,Vue Chartjs,我正在尝试使用VueJS和ChartJS更新图表,到目前为止,我可以访问对象的每个属性,但如果我尝试更改对象的属性,则会出现错误: [Vue warn]: Error in mounted hook: "TypeError: _chart_data_js__WEBPACK_IMPORTED_MODULE_5__.planetChartData.update is not a function" 我去了ChartJS的教程部分和问题部分,但是我找不到关于这个问题的任何线索。 我觉得奇怪的是“推”
[Vue warn]: Error in mounted hook: "TypeError: _chart_data_js__WEBPACK_IMPORTED_MODULE_5__.planetChartData.update is not a function"
我去了ChartJS的教程部分和问题部分,但是我找不到关于这个问题的任何线索。
我觉得奇怪的是“推”功能工作得非常好。
到目前为止,我尝试的是:
.vue文件
<template>
<div id="app" style="position: relative; height:500px; width:500px">
<canvas :width="300" :height="300" id="planet-chart"></canvas>
</div>
</template>
...
import { mapActions, mapState } from 'vuex'
import Chart from 'chart.js';
import {planetChartData,pie} from './chart-data.js';
// import { mapActions } from 'vuex'
// import { connectionsAlive } from '../../api/mkt-api.js'
export default {
mounted() {
var x=this.createChart('planet-chart', this.planetChartData)
planetChartData.data.labels.push('Janvier', 'Février')
planetChartData.update();
},
data () {
return {
planetChartData: planetChartData,
}
},
methods: {
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
}
}
</script>
export const planetChartData = {
type: 'bar',
data: {
labels: ['Janvier', 'Février', 'Mars', 'Avril'],
datasets: [
{ // one line graph
label: 'Number of users',
data: [3018, 3407, 3109,1060],
backgroundColor: [
'rgba(54,73,93,.5)', // Blue
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)',
'rgba(54,73,93,.5)'
],
borderColor: [
'#36495d',
'#36495d',
'#36495d',
'#36495d'
],
borderWidth: 3
},
]
},
options: {
responsive: true,
lineTension: 1,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
padding: 40,
}
}]
}
}
}
也许我使用了错误的语法,如果有人有想法,请告诉我,谢谢。
关于。在vue文件中,
planetChartData
是对js文件中对象“planetChartData”的引用。它不是对您在createChart()中创建的图表的引用。
您需要返回已创建的图表,以便可以对其调用update()
:
createChart(chartId,chartData){
const ctx=document.getElementById(chartId);
常量myChart=新图表(ctx{
类型:chartData.type,
数据:chartData.data,
选项:chartData.options,
});
return myChart//非常感谢它以这种方式工作,我也会尝试一下vue chartjs方式