kendo-vue-ui图表从后端获取数据后如何渲染

Question

我正在使用 kendo-charts-vue-wrapper 组件来显示图表，方法是从 API.

中获取值

下面的代码显示了 kendo-图表的部分实现。

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

从后端获取正确的值后渲染模板的合适方法是什么？这种情况的解决方法是什么？

Answer 1

我解决了，这些问题：

首先，我将 series 和 categories 初始化为空数组。然后，从getData获取数据后，设置series和categories的值。

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
        }
    }
})

https://stackblitz.com/edit/ffek5q-adue4f?file=index.js

kendo-vue-ui图表从后端获取数据后如何渲染

How to render the kendo-vue-ui chart after the data is fetched from the backend

kendo-ui

vuejs2