如何解决从后端获取数据后如何呈现kendo-vue-ui图表
我正在使用kendo-charts-vue-wrapper
组件,该组件应通过从API提取值来显示图表。
下面的代码显示了kendo-charts的部分实现。
import Vue from 'vue';
import $ from 'jquery';
import '@progress/kendo-ui';
import { Chart,ChartSeriesItem,SotckChart,Sparkline,SparklineSeriesItem,ChartInstaller } from '@progress/kendo-charts-vue-wrapper';
import JSZip from 'jszip';
Vue.use(ChartInstaller);
new Vue({
el: "#vueapp",beforeMount(){
this.getData();
},methods:{
getData(){
//make the API call here.
this.xlabel = [2000,2001,2002,2003];
this.ylabel = [200,450,300,125];
}
},data: function() {
return {
series: [{
name: 'Example Series',data: this.ylabel //get value fetching from the api
}],categories: this.xlabel //get value fetching from the api
}
}
})
模板:
<div id="vueapp" class="vue-app">
<kendo-chart :title-text="'Kendo Chart Example'"
:series="series"
:category-axis-categories="categories"
:theme="'sass'">
</kendo-chart>
</div>
以下是实现:https://stackblitz.com/edit/ffek5q
在此示例中,我想使用API调用从后端获取数据并将值绑定到series
和categories
但是当模板呈现时,无法通过API获取数据,并且模板无法显示包含正确数据的图表。
从后端获取适当的值后,呈现模板的合适方法是什么?这种情况下可以采取什么解决方法?
解决方法
我解决了以下问题:
首先,我将series
和categories
初始化为空数组。然后,从getData
获取数据后,设置序列和类别的值。
import Vue from 'vue';
import $ from 'jquery';
import '@progress/kendo-ui';
import { Chart,ChartSeriesItem,SotckChart,Sparkline,SparklineSeriesItem,ChartInstaller } from '@progress/kendo-charts-vue-wrapper';
import JSZip from 'jszip';
Vue.use(ChartInstaller);
new Vue({
el: "#vueapp",beforeMount(){
this.getData();
},methods:{
getData(){
//make the API call here.
this.categories = [2000,2001,2002,2003];
this.series = [{
name: 'Example Series',data: [200,450,300,125] //get value fetching from the api
}];
}
},data: function() {
return {
series: [],categories: []//get value fetching from the api
}
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。