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

Question

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

Answer 1

使用Aurelia时，剑道和Aurelia之间有一个第三方桥梁，称为aurelia-kendo-bridge 。 使用它们时，它们具有一个recreate（）函数，可以运行该函数以重新加载图表。 我只需要定位我所有的图表，就可以了。 非常感谢@Jeroen Vinke的所有帮助。

Answer 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

Answer 3

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

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

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