从 kendo-ui 图表系列调用 API 数据答案

【问题标题】：Calling API data from kendo-ui chart series从 kendo-ui 图表系列调用 API 数据
【发布时间】：2016-05-24 20:27:40
【问题描述】：

如果您不使用数据源而是使用 API 的返回数据动态创建系列集，是否有办法使用远程数据刷新图表？我想做的是再次调用 API 并重建图表。

【问题讨论】：

能把相关代码分享给我们吗？

标签： javascript kendo-ui

【解决方案1】：

在使用 Aurelia 时，剑道和 aurelia 之间有一个名为 aurelia-kendo-bridge 的第三方桥梁。使用它时，他们有一个 recreate() 函数，可以运行该函数来重新加载图表。我只需要瞄准我所有的图表，它就奏效了。非常感谢@Jeroen Vinke 的所有帮助。

【讨论】：

【解决方案2】：

使用这个你可以从控制器调用 api，如果你想实时更新尝试在特定时间刷新图表。

 $("#chartere").kendoChart({
              dataSource: {
                  transport: {
                      read: {
                          url: '@Html.Raw(@Url.Action("method", "controller"))',
                          dataType: "json"
                      }
                  },
                  group: {
                      field: "title",
                      Color: "Color"
                  }
              },

              seriesDefaults: {
                  type: "bar",
                  stack: {
                      type: "100%"
                  }
              },
              series: [{
                  field: "value",
                  colorField: 'Color',
                  groupColor: function (item) {
                      var series = item.series;
                      series.color = series.data[item.index].Color;
                  }
              }],

              categoryAxis: {
                  field: "Category",
                  majorGridLines: {
                      visible: false
                  }
              },

              valueAxis: {
                  line: {
                      visible: true
                  },
                  minorGridLines: {
                      visible: true
                  }
              },
          });

并使用它来刷新图表

chart.dataSource.read();
chart.refresh();

请检查此网址 http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#refresh

【讨论】：

如果不使用数据源而是使用系列并将数据放入系列中怎么办？你如何刷新这个系列？示例：demos.telerik.com/kendo-ui/bar-charts/index

【解决方案3】：

每个剑道小部件都有一个setOptions 函数，允许您以与初始化它们相同的方式更改小部件的选项。您将能够使用该功能替换系列。

$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3]
    }]
});

var chart = $("#chart").data("kendoChart");
chart.setOptions({
    series: [{
        data: [4, 5, 6]
    }]
});
chart.refresh();

【讨论】：