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',

type: 'line',

marginRight: 130,

marginBottom: 25

},

title: {

text: 'Monthly Average Temperature',

x: -20 //center

},

subtitle: {

text: 'Source: WorldClimate.com',

x: -20

},

xAxis: {

categories: []

},

yAxis: {

title: {

text: 'Temperature (°C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

formatter: function () {

return '<b>' + this.series.name + '</b><br/>' +

this.x + ': ' + this.y + '°C';

}

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

},

series: []

};

$.get("getdata.aspx", { index: 1 }, function (data) {

data = data.split('&');

var data1 =eval(data[1]);

for (var i = 0; i < data1.length; i++) {

options.series.push(data1[i]);

}

var cate = data[0].split(',');

for (var i = 0; i < cate.length; i++) {

options.xAxis.categories.push(cate[i]);

}

chart = new Highcharts.Chart(options);

});

});

</script>

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h2>

欢迎使用 ASP.NET!

</h2>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</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] },");

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]},");

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]}]");

Response.Write(sb);

}

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

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

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