花了点时间折腾出来的,记录一下结果,以免忘记:
客户端代码:
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 >
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 }
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方法,将转换后的数据加入进去,终于完成。