Javascript Vue.js图表不工作?
我正在用Javascript Vue.js图表不工作?,javascript,laravel,vue.js,chart.js,Javascript,Laravel,Vue.js,Chart.js,我正在用vue.js尝试chart.js 我有一个名为MessageGraph的组件,看起来像这样(数据等来自): 然后在我的app.blade文件中,我有以下内容: <message-graph></message-graph> 可能是什么问题?您正在访问created()钩子中的canvas元素,该钩子在模板附加到DOM之前调用 要解决问题,您需要将代码放入组件的mounted()钩子中。但仍然不能保证模板在文档中。因此,必须使用$vm.nextTick()来确
vue.js
尝试chart.js
我有一个名为MessageGraph
的组件,看起来像这样(数据等来自):
然后在我的app.blade文件中,我有以下内容:
<message-graph></message-graph>
可能是什么问题?您正在访问
created()
钩子中的canvas元素,该钩子在模板附加到DOM之前调用
要解决问题,您需要将代码放入组件的mounted()
钩子中。但仍然不能保证模板在文档中。因此,必须使用$vm.nextTick()来确保DOM就绪。()
另外,我建议使用vue,它比document.getElementById()
更像vue(它也可以工作)
Vue.component('message-graph'{
模板:“”,
安装的(){
这个.$nextTick(()=>{
让myChart=新图表(此.$refs.Chart{
类型:'bar',
数据:{
标签:[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”],
数据集:[{
标签:“#投票数”,
数据:[12,19,3,5,2,3],
背景颜色:[
"rgba(255,99,132,0.2)",,
“rgba(54162235,0.2)”,
"rgba(255,206,86,0.2)",,
“rgba(751921920.2)”,
“rgba(153102255,0.2)”,
‘rgba(255、159、64、0.2)’
],
边框颜色:[
"rgba(255,99132,1)",,
“rgba(54162235,1)”,
"rgba(255,206,86,1)",,
"rgba(751921921)",,
"rgba(153102255,1)",,
‘rgba(255、159、64、1)’
],
边框宽度:1
}]
},
选项:{
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的
}
}]
}
}
})
})
}
})
设vue=新vue({
el:“#应用程序”,
模板:“”
})
似乎您忘记设置画布上下文var ctx=document.getElementById('myChart').getContext(“2d”)代码>您应该删除laravel标记,这与此无关。
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)
Vue.component('messageGraph', require('./components/graph/MessageGraph.vue'));
<message-graph></message-graph>