HighChart控件动态获得后台数据

花了点时间折腾出来的，记录一下结果，以免忘记：

客户端代码：

 1 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
 2     <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
 3     <script type="text/javascript" src="js/highcharts.js"></script>
 4     <script type="text/javascript">
 5         var chart;
 6         $(function () {
 7             var options = {
 8                 chart: {
 9                     renderTo: 'container',
10                     type: 'line',
11                     marginRight: 130,
12                     marginBottom: 25
13                 },
14                 title: {
15                     text: 'Monthly Average Temperature',
16                     x: -20 //center
17                 },
18                 subtitle: {
19                     text: 'Source: WorldClimate.com',
20                     x: -20
21                 },
22                 xAxis: {
23                     categories: []
24                 },
25                 yAxis: {
26                     title: {
27                         text: 'Temperature (°C)'
28                     },
29                     plotLines: [{
30                         value: 0,
31                         width: 1,
32                         color: '#808080'
33                     }]
34                 },
35                 tooltip: {
36                     formatter: function () {
37                         return '<b>' + this.series.name + '</b><br/>' +
38                         this.x + ': ' + this.y + '°C';
39                     }
40                 },
41                 legend: {
42                     layout: 'vertical',
43                     align: 'right',
44                     verticalAlign: 'top',
45                     x: -10,
46                     y: 100,
47                     borderWidth: 0
48                 },
49                 series: []
50             };
51 
52             $.get("getdata.aspx", { index: 1 }, function (data) {
53                 data = data.split('&');
54                 var data1 =eval(data[1]);
55                 for (var i = 0; i < data1.length; i++) {
56                     options.series.push(data1[i]);
57                 }
58                 var cate = data[0].split(',');
59                 for (var i = 0; i < cate.length; i++) {
60                     options.xAxis.categories.push(cate[i]);
61                 }
62                 chart = new Highcharts.Chart(options);
63             });
64         });
65     </script>
66 </asp:Content>
67 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
68     <h2>
69         欢迎使用 ASP.NET!
70     </h2>
71 
72     
73     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
74 </asp:Content>

服务器端的代码：

 1         public void GetData()
 2         {
 3             StringBuilder sb = new StringBuilder();
 4             //X轴显示的名称
 5             sb.Append("Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec&");
 6             //数据组合成JSON样式
 7             sb.Append("[");
 8             sb.Append("{name: 'test1',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},");
 9             sb.Append("{name: 'test2',data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] },");
10             sb.Append("{name: 'Berlin',data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]},");
11             sb.Append("{name: 'London',data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}]");
12 
13             Response.Write(sb);
14         }


主要是JSON样式的数据组合。

还有就是JS函数eval的用法。

options.series是一个数组，因此我们可以使用push方法，将转换后的数据加入进去,终于完成。

posted @ 2012-06-22 18:59  科睿思博  阅读(689)  评论(0)  编辑  收藏  举报