Highchart通过jquery ajax绑定 [英] Highchart Binding through jquery ajax
本文介绍了Highchart通过jquery ajax绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下服务工作正常并获得json但高图列不生成。
public < span class =code-keyword> class Serie
{
public object [] data { get ; set ; }
public string name { get ; set ; }
}
[WebMethod]
public string LoadCountry（）
{
List< serie> series = new List< serie>（）;
series = new 列表< serie>（）;
series.Add（ new Serie
{
name = Tokyo，
data = new Object [] { 49 。 9 ， 71 . 5 ， 106 。 4 ， 129 。 2 }
}）;
series.Add（ new Serie
{
name = 纽约，
data = new 对象 [] { 83 。 6 ， 78 。 8 ， 98 。 5 ， 93 。 4 }
}）;
series.Add（ new Serie
{
name = 伦敦，
data = new object [] { 48 。 9 ， 38 . 8 ， 39 。 3 ， 41 。 4 }
}）;
series.Add（ new Serie
{
name = Berlin，
data = new object [] { 42 。 4 ， 33 . 2 ， 34 。 5 ， 39 。 7 }
}）;
JavaScriptSerializer jc = new JavaScriptSerializer（）;
string Json = jc.Serialize（series）;
return Json;
这里是JQuery ajax < br $> b $ b
< script src = < span class =code-keyword> jquery-1.3.2.min.js type = text / javascript > < / script >
< script < span class =code-attribute> src = HighChart / highcharts.js type = text / javascript > < / script >
< script type = text / javascript src = HighChart / exports.js > < / script >
< script type = text / javascript >
$（document）.ready（function（）{
debugger;
var series = [];
$ .ajax（{
类型：POST，
contentType：application / json; charset = utf-8，
url：CountryDetails.asmx / LoadCountry ，
数据：{}，
dataType：json，
成功：函数（结果）{
series = Result.d;
console.log （系列）;
// $ .each（Result.d，函数（键，值）{
// $（＃ddlcountry）。append（$（< 选项 > < / option > ）。val（value.CountryId）.html （value.CountryName））;
//}）;
}，
错误：function（Result）{
ale室温（ 错误）;
}
}）;
$（'＃container'）。highcharts（{
chart：{
type：'column'
}，
title：{
text： '每月平均降雨量'
}，
副标题：{
text：'来源：WorldClimate.com'
}，
xAxis：{
类别： [
'Jan'，
'Feb'，
'Mar'，
'Apr'
]
}，
yAxis：{
min：0，
title：{
text：'Rainfall（mm）'
}
}，
工具提示：{
headerFormat ：'< span style = font-size：10px > {point.key} < / span > < table > '，
pointFormat：'< tr > < td 样式 = color：{series.color}; padding：0 > {series.name}： < / td > '+
'< td 样式 = padding：0 > < b > {point.y：.1f} mm < / b < span class =code-keyword>> < / td > < / tr > '，
footerFormat：'< / table > '，
shared：true，
useHTML：true
}，
plotOptions：{
column：{
pointPadding：0.2，
borderWidth：0
}
}，
系列：系列
}）;
}）;
< / script >
让Json像这样
< pre lang =c＃> [{ data ：[49.9,71.5,106.4,129.2]， name ：东京 }，{ data ：[83.6,78.8,98.5,93.4]， name ：纽约 }， {数据 ：[48.9,38.8,39.3,41.4]， name < span class =code-string> ：伦敦 }，{ data ：[42.4,33.2， 34.5,39.7]， name ： Berlin }]
我想要的像这样绑定
[{name：' 东京'，数据：[ 49 。 9 ， 71 。 5 ， 106 。 4 ， 129 。 2 ]}，{name：' 纽约，数据：[ 83 。 6 ， 78 。 8 ， 98 <温泉n class =code-digit> 5 ， 93 。 4 ]}，{ name：' London'，data：[ 48 。 9 ， 38 。 8 ， 39 。 3 ， 41 。< span class =code-digit> 4 ]}，{name：' Berlin'，data：[ 42 。 4 ， 33 。 2 ， 34 。 5 ， 39 。 7 ]}]
因为我无法绑定或任何其他原因需要帮助
请帮我这个吗？
提前感谢..
解决方案
（document）.ready（function（）{
debugger;
var series = [];
.ajax（{
type：POST，
contentType：application / json; charset = utf- 8，
url：CountryDetails.asmx / LoadCountry，
data：{}，
dataType：json，
success：function（Result）{
series = Result.d;
console.log（series）;
//
.each（Result.d，function（key，value） {
//
Below service is working fine and getting json also but highchart column not generating.
public class Serie
{
public object[] data { get; set; }
public string name { get; set; }
}
[WebMethod]
public string LoadCountry()
{
List<serie> series = new List<serie>();
series = new List<serie>();
series.Add(new Serie
{
name = "Tokyo",
data = new Object[] { 49.9, 71.5, 106.4, 129.2 }
});
series.Add(new Serie
{
name = "New York",
data = new Object[] { 83.6, 78.8, 98.5, 93.4 }
});
series.Add(new Serie
{
name = "London",
data = new object[] { 48.9, 38.8, 39.3, 41.4}
});
series.Add(new Serie
{
name = "Berlin",
data = new object[] { 42.4, 33.2, 34.5, 39.7 }
});
JavaScriptSerializer jc = new JavaScriptSerializer();
string Json = jc.Serialize(series);
return Json;
And Here is JQuery ajax
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="HighChart/highcharts.js" type="text/javascript"></script>
<script type="text/javascript" src="HighChart/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
var series = [];
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CountryDetails.asmx/LoadCountry",
data: "{}",
dataType: "json",
success: function (Result) {
series = Result.d;
console.log(series);
// $.each(Result.d, function (key, value) {
// $("#ddlcountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
// });
},
error: function (Result) {
alert("Error");
}
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr'
]
},
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: series
});
});
</script>
Getting Json like this
"[{"data":[49.9,71.5,106.4,129.2],"name":"Tokyo"},{"data":[83.6,78.8,98.5,93.4],"name":"New York"},{"data":[48.9,38.8,39.3,41.4],"name":"London"},{"data":[42.4,33.2,34.5,39.7],"name":"Berlin"}]"
I want to bind like this
[{name: 'Tokyo',data:[49.9,71.5,106.4,129.2]}, {name: 'New York',data: [83.6,78.8,98.5,93.4]},{name: 'London',data: [48.9,38.8,39.3,41.4]},{name: 'Berlin',data: [42.4,33.2,34.5,39.7]}]
Is beacuase of reason i am unable to bind or any other reason
please help me on this?
thanks in advance..
解决方案
(document).ready(function () { debugger; var series = [];
.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "CountryDetails.asmx/LoadCountry", data: "{}", dataType: "json", success: function (Result) { series = Result.d; console.log(series); //
.each(Result.d, function (key, value) { //
这篇关于Highchart通过jquery ajax绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
