Question

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

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

Answer 1

我解决了以下问题：

首先，我将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
        }
    }
})

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

从后端获取数据后如何呈现kendo-vue-ui图表

1 个答案: