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方法，将转换后的数据加入进去,终于完成。