效果如下:
我们用example里的例子做演示(examples\dataviz\line-chart\remotedata):
1.首先我们需要定义的是数据源
var dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: "http://localhost:3458/DataService/GetMetricCharts",// JSONP is required for cross-domain AJAX dataType: "jsonp",// additional parameters sent to the remote service data: { aggregationType: '60-avg',timeRange:'sel',metricid:'34',stDate:'2011-10-29T16:00:00.000Z',enDate:'2012-02-08T02:25:55.196Z' } } },// describe the result format schema: { // the data which the data source will be bound to is in the "results" field data: "" } });
2.然后将其绑定到chart的datasource属性上:
function createChart() { $("#chart").kendoChart({ theme: $(document).data("kendoSkin") || "default",dataSource: dataSource,title: { text: "Spain electricity production (GWh)" },legend: { position: "top" },seriesDefaults: { type: "line" },series: [{ field: "m1",name: "m1" }],categoryAxis: { field: "DateTime",labels: { rotation: -90,template: "#= formatDate(value) #" },},valueAxis: { labels: { format: "{0:N0}" },//majorUnit: 50 },tooltip: { visible: true,format: "{0:N0}" } }); }
3.修改series中的field属性,将其与wcf所传过来的值mapping,(lz的wcf传的是json)
4.将categoryAxis的field也定义好,这个是x轴的坐标。
5.x轴传得是时间,由于传回来的json时间数据是.NET DataTime,需要转换,lz参考了文章:http://www.kendoui.com/forums/ui/chart/kendo-ui-chart-category-field-dateformats.aspx,以及sencha touch 已有的方法,结合后引入sencha-touch.js文件,用里面内置的时间转换方法转的时间,代码如下:
function formatDate(dateString) { var ticks=Date.parseDate(dateString,"M{1}quot;); d = new Date(ticks); return d.getDate() + "/"+ (d.getMonth() + 1) + "/" + d.getFullYear().toString().substring(2,4) };
附引入的js及样式文件:
<link href="../../shared/styles/examples.css" rel="stylesheet"/> <link href="../../shared/styles/examples-offline.css" rel="stylesheet"/> <link href="../../../source/styles/kendo.common.css" rel="stylesheet"/> <link href="../../../source/styles/kendo.default.css" rel="stylesheet"/> <script src="../../../source/js/jquery.min.js"></script> <script src="../../../source/js/kendo.core.js"></script> <script src="../../../source/js/kendo.data.js"></script> <script src="../../../source/js/kendo.chart.js"></script>