用VueJS绘制图上的异步信息
我正在使用一个古老的代码点火器2.xMVC项目。我们开始为VueJS修改VueJS，我现在要做的事情之一就是制作一个图形，非常简单。使用axios我可以得到数据，这不是一个问题。问题是，即使在传递信息时，我也无法使图形呈现信息。
我有一个创建图形的函数，其中已经获得了以前获得的信息：
createChart() {
var ctx = document.getElementById('grafico-historico');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.labels,
datasets: [{
label: 'Monto',
data: this.data,
borderWidth: 1
}]
}
});
}我将信息或响应对象保存在组件的data ()部分中：
data() {
return {
labels: [],
data: []
}
},结果是一个空图。另一方面，如果我手动对图形中的标签和数据信息进行硬编码，如果它工作并显示结果的话。我是VueJS的新手，所以我想这可能是概念上的错误，或者是发生在我身上的一些事情，你能告诉我应该注意的地方吗？我试着使用vue图表库，但得到的结果完全一样。我添加了我的组件的所有代码，这样您就可以获得更“全局”的外观。
Vue.component('line-chart', {
data() {
return {
labels: [],
data: []
}
},
created() {
this.getData();
},
mounted() {
this.createChart();
},
methods: {
getData() {
var labels = [];
var data = [];
axios.get(`/propietarios/api_buscarExpensasUnidad/${this.unidadid}`, {
credentials: 'same-origin'
}).then(r => {
r.data.datos.map(x => {
this.titulos.push(x[0]);
this.data.push(parseInt(x[1]));
});
}).catch(e => {
console.error(e);
});
},
createChart() {
var ctx = document.getElementById('grafico-historico');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.labels,
datasets: [{
label: 'Monto',
data: this.data,
borderWidth: 1
}]
}
});
}
}
});最后，我不使用.vue文件，因为这是不可能的，因为我们目前正在使用的项目的架构，因此我有一个单独的* .js文件中的组件，我导入到html + php中才能使用它。
回答 1
Stack Overflow用户
发布于 2018-01-29 09:02:18
VueJS使用虚拟DOM (如ReactJS)和
Vue是一个嫉妒的库，从某种意义上说，您必须让它完全拥有您给它的DOM补丁(由传递给el的内容定义)。
src：https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
因此，直接修改DOM的库在VueJS中不能很好地工作。例如chartjs，jquery，等等.
labels: this.labels,，在异步函数完成后，data: this.data,将不会接收更新的数据。简而言之，它不是Vue组件，也不适用于Vue的反应性系统。
幸运的是，人们已经制作了一个与Vue兼容的ChartJs集成库(https://github.com/apertureless/vue-chartjs)，它可以与VueJS reacivity系统一起工作。
示例：https://codepen.io/jacobgoh101/pen/YezPLg?editors=0010
您将需要使用库中的混合VueChartJs.mixins.reactiveProp来使图表具有反应性。
HTML
<div class="app">
{{ message }}
<line-chart :chart-data="chartData" :options="options"></line-chart>
</div>JS
Vue.component("line-chart", {
extends: VueChartJs.Line,
props: ["chartData", "options"],
mixins: [VueChartJs.mixins.reactiveProp],
mounted() {
this.renderChart(this.chartData, this.options);
}
});
var vm = new Vue({
el: ".app",
data: {
message: "Hello World",
chartData: null,
options: { responsive: true, maintainAspectRatio: false }
},
mounted() {
this.sampleAsync();
},
methods: {
sampleAsync() {
setTimeout(() => {
this.chartData = {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [40, 39, 10, 40, 39, 80, 40]
}
]
};
}, 1000);
}
}
});https://stackoverflow.com/questions/48494400
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号