从后端获取数据后如何呈现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获取数据，并且模板无法显示包含正确数据的图表。

从后端获取适当的值后，呈现模板的合适方法是什么？这种情况下可以采取什么解决方法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）