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屋!
查看全文