关于调用json webservice在jquery中制作jqplot条形图

问题描述

我正在尝试使用json webservice数据填充jqplot条形图.....在jquery中



我的json webservice将数据返回为 -



[{A：115.0，B：55.0，C：0.0，D：29.04}]



如何使用这些数据在jquery中填充我的jqplot条形图



我的代码是 -



< script language =javascripttype =text / javascript>



function testService（）

{



$ .jqplot.config.enablePlugins = true;



var AjaxDataRenderer = function（url，plot，options）{

var ret;

$ .ajax （{

async：true，

类型：GET，

dataType：'jsonp'，

contentType：text / javascript，

cache：false，

crossDomain：true，

jsonp：'callback'，

jsonpCallback：'processResult'，

url：http://130.1.5.139/EWSMvcApp/api/barchart，



错误：函数（xhr，textStatus，错误）{

window.alert（错误）;

}，

成功：函数（数据）{



window.alert（通过）;



ret = data;

}

}）;

返回ret;

};



var plot = $ .jqplot（'id-BarChart'，[]，{

标题：TRIAL，

dataRenderer：AjaxDataRenderer，

seriesDefaults：{

renderer：$。jqplot.BarRenderer，

rendererOptions：{fillToZero：true}

}，

系列：[{color：'＃5FAB78'，label：Actual}]，

图例：{

show：true，

placement：insideGrid，

rendererOptions：{

textColor：#FFFFFF，

fontSize：10pt

}}，

轴：{

x轴：{

渲染器：$ .jqplot.CategoryAxisRenderer，

tickRenderer：$ .jqplot.CanvasAxisTickRenderer，

tickOptions：{

角度：-30，

fontSize：'10pt'

}

}，

yaxis：{

min：10，

max：300，

tickOptions：{

formatString：'$ ％$'

}

}

}

}）;

}



< / script>

解决方案

I am trying to populate a jqplot bargraph with the json webservice data .....in jquery

my json webservice returns data as -

[{"A":115.0,"B":55.0,"C":0.0,"D":29.04}]

how can I use this data to populate my jqplot bargraph in jquery

my code is -

<script language="javascript" type="text/javascript" >

function testService()
{

$.jqplot.config.enablePlugins = true;

var AjaxDataRenderer = function(url, plot, options) {
var ret;
$.ajax({
async: true,
type: "GET",
dataType: 'jsonp',
contentType: "text/javascript",
cache: false,
crossDomain: true,
jsonp: 'callback',
jsonpCallback: 'processResult',
url: "http://130.1.5.139/EWSMvcApp/api/barchart",

error: function (xhr, textStatus, error) {
window.alert(error);
},
success: function(data) {

window.alert("pass");

ret = data;
}
});
return ret;
};

var plot = $.jqplot('id-BarChart', [],{
title: "TRIAL",
dataRenderer: AjaxDataRenderer,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
series:[{color:'#5FAB78',label:"Actual"}],
legend: {
show: true,
placement: "insideGrid",
rendererOptions: {
textColor: "#FFFFFF",
fontSize: "10pt"
}},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
yaxis: {
min: 10,
max: 300,
tickOptions: {
formatString: '$%d'
}
}
}
});
}

</script>

解决方案

这篇关于关于调用json webservice在jquery中制作jqplot条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！