js:
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/highcharts.js"></script>
<script src="Scripts/json2.js"></script>
<script type="text/javascript" >
$().ready(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: getData()
});
function getData() {
var retvalue;
$.ajax({
url: 'Test.aspx/getData',
data: [],
dataType: 'json',
type: 'POST',
async: false,
contentType: "application/json; charset=utf-8",
success: function (data) {
retvalue = eval( data.d);
},
error: function (xhr, ajaxOptions, thrownError) {
var errorData = JSON.parse(xhr.responseText);
$.each(errorData, function (key, value) {
if (key == 'Message') {
alert(value);
retvalue = "0";
}
});
}
})
return retvalue;
}
});
</script>
c#:
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string getData()
{
string l_str = "";
List<CMyitem> l_list = new List<CMyitem> ();
List<Int32> l_listData = new List<Int32>();
for (int i = 0; i < 12; i++)
{
int l_temp =i* new Random().Next(5);
l_listData.Add(l_temp);
}
CMyitem l_A客戶 = new CMyitem();
l_A客戶.name = "A客戶";
l_A客戶.data = l_listData;
l_list.Add(l_A客戶);
CMyitem l_b客戶 = new CMyitem();
l_b客戶.name = "B客戶";
l_b客戶.data = l_listData;
l_list.Add(l_b客戶);
JavaScriptSerializer l_JS = new JavaScriptSerializer();
l_str = l_JS.Serialize(l_list);
return l_str;
}
}
public class CMyitem
{
public string name { get; set; }
public List<Int32> data { get; set; }
}
final:
全站熱搜
留言列表
