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

时间:2016-05-24 20:27:41

标签: javascript kendo-ui

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

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

使用此功能,您可以从控制器调用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

答案 2 :(得分:0)

每个kendo小部件都有setOptions功能,允许您以与初始化小部件相同的方式更改小部件的选项。您将能够使用该功能替换该系列。

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

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