kendoUI Chart 如何获得wcf数据 并显示正常日期


效果如下:



我们用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>



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值