[英]Vue.js chart not working?
我正在嘗試chart.js
和vue.js
。
我有一個名為MessageGraph
的組件,看起來像這樣(數據等來自文檔):
<template>
<canvas id="myChart" width="400" height="400"></canvas>
</template>
<script>
import Chart from 'chart.js';
export default {
created() {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
</script>
但我在控制台中收到此錯誤:
app.c47f281….js:71222 [Vue warn]: Error in created hook:
(found in <MessageGraph> at /Users/Janssen/Code/forumv2/resources/assets/js/components/graph/MessageGraph.vue)
warn @ app.c47f281….js:71222
handleError @ app.c47f281….js:72107
callHook @ app.c47f281….js:72939
Vue._init @ app.c47f281….js:74420
VueComponent @ app.c47f281….js:74584
createComponentInstanceForVnode @ app.c47f281….js:73779
init @ app.c47f281….js:73587
createComponent @ app.c47f281….js:75318
createElm @ app.c47f281….js:75261
createChildren @ app.c47f281….js:75386
createElm @ app.c47f281….js:75294
createChildren @ app.c47f281….js:75386
createElm @ app.c47f281….js:75294
patch @ app.c47f281….js:75753
Vue._update @ app.c47f281….js:72697
updateComponent @ app.c47f281….js:72820
get @ app.c47f281….js:73131
Watcher @ app.c47f281….js:73114
mountComponent @ app.c47f281….js:72824
./node_modules/vue/dist/vue.common.js.Vue$3.$mount @ app.c47f281….js:77914
./node_modules/vue/dist/vue.common.js.Vue$3.$mount @ app.c47f281….js:79963
Vue._init @ app.c47f281….js:74430
Vue$3 @ app.c47f281….js:74511
./resources/assets/js/app.js @ app.c47f281….js:80091
__webpack_require__ @ app.c47f281….js:20
0 @ app.c47f281….js:80854
__webpack_require__ @ app.c47f281….js:20
(anonymous) @ app.c47f281….js:66
(anonymous) @ app.c47f281….js:69
app.c47f281….js:72111 TypeError: Cannot read property 'length' of null
at Object.acquireContext (app.c47f281….js:14468)
at new Chart.Controller (app.c47f281….js:7776)
at new Chart (app.c47f281….js:10193)
at VueComponent.created (app.c47f281….js:2106)
at callHook (app.c47f281….js:72937)
at VueComponent.Vue._init (app.c47f281….js:74420)
at new VueComponent (app.c47f281….js:74584)
at createComponentInstanceForVnode (app.c47f281….js:73779)
at init (app.c47f281….js:73587)
在我的 app.js 中,我添加了組件:
Vue.component('messageGraph', require('./components/graph/MessageGraph.vue'));
然后在我的 app.blade 文件中我有這個:
<message-graph></message-graph>
可能是什么問題呢?
您正在訪問created()
掛鈎中的畫布元素,該掛鈎在您的模板附加到 DOM 之前被調用。
要解決您的問題,您需要將代碼放入組件的mounted()
掛鈎中。 但是,仍然不能保證模板在文檔中。 所以你必須使用 $vm.nextTick() 來確保 DOM 准備就緒。 (來源)。
另外,我建議使用 vue 的Child 組件 refs ,它比document.getElementById()
更像 vue(它也可以)。
Vue.component('message-graph', { template: '<canvas ref="chart" width="400" height="400"></canvas>', mounted() { this.$nextTick(() => { let myChart = new Chart(this.$refs.chart, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }) }) } }) let vue = new Vue({ el: '#app', template: '<div class="myApp"><message-graph></message-graph></div>' })
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script> <div id="app"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.