数据库、servlet、json、javascript和highchart饼图
database, servlet, json , javascript and highchart pie chart
我需要使用servlet中的"json"数据生成一个动态的"highchart"饼图,数据库方法运行正常,但json部分没有向饼图传递任何数据。
"下面是我的servlet代码"
公共类SubCountyAjaxApplications扩展HttpServlet{
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
ArrayList<Applications> Rawpplications = AdminDB.sub_countyApplications();
response.setContentType("text/html");
response.setHeader("Cache-control", "no-cache, no-store");
response.setHeader("Pragma", "no-cache");
response.setHeader("Expires", "-1");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");
response.setHeader("Access-Control-Max-Age", "86400");
Gson gson = new Gson();
JsonArray results = new JsonArray();
for (Applications application : Rawpplications) {
JsonObject myObj = new JsonObject();
myObj.addProperty("key",application.getSub_county());
System.out.println(application.getSub_county()+":"+application.getAmount_applied());
myObj.addProperty("value",application.getAmount_applied());
results.add(myObj);
}
out.println(results.getAsJsonArray());
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
//下面是我的javascript文件,标题出现了,但没有图表
var chart;
$(document).ready(
function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
},
title: {
text: 'County Application Distribution'
},
tooltip: {
formatter: function () {
var s;
if (this.point.name) { // the pie chart
s = '' + this.point.name + ': ' + this.y
+ ' Bugs';
} else {
s = '' + this.x + ': ' + this.y;
}
return s;
}
},
labels: {
items: [{
html: '',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'pie',
name: 'Total Bugs',
data: [],
center: [70, 50],
size: 50,
showInLegend: false,
dataLabels: {
enabled: false
},
}, ]
},function getdata(chart) {
var tmp = "";
var receivedData = "";
$.ajax({
url: 'SubCountyAjaxApplications',
dataType: 'json',
error: function () {
alert("error occured!!!");
},
success: function (data) {
var chartData = [];
$.each(data.jsonArray, function (index)
{
$.each(data.jsonArray[index],
function (key, value) {
var point = [];
point.push(key);
point.push(value);
chartData.push(point);
});
});
chart.series[0].setData(chartData);
}
});
});
});
我在哪里犯了错误
假设ajax调用返回的数据是上面指定的格式:
[{"key":"CHANGAMWE","label":"20,000"},{"key":"JOMVU","label":"55,000"},{"key":"Kathiani","label":"42,000"},{"key":"KISAUNI","label":"60,000"},{"key":"LIKONI","label":"20,000"},{"key":"Machakos Town","label":"15,000"},{"key":"MVITA","label":"15,000"},{"key":"NYALI","label":"35,000"}]
你可以像这样改变你的解析循环,为Highcharts:返回一个合适的数据数组
var chartData = [];
$.each(data, function (i, node) {
chartData.push( [ node.key, parseFloat(node.label) ] );
});
示例:
- http://jsfiddle.net/jlbriggs/3d3fuhbb/134/
相关文章:
- 将高图饼图中的文本居中显示为响应
- d3饼图与烧瓶服务器
- 如何在d3.js饼图或圆环图中添加阴影
- 将d3中饼图的一部分隔开
- D3饼图未更新
- Highcharts饼图和列的默认颜色不相同
- D3.js:将一个有响应的饼图放在其父分区的中心
- 为什么d3.js饼图转换不起作用
- 为什么jqPlot显示了一个错误的饼图,其中包含通过AJAX检索的数据
- 将两个图形(饼图和条形图)并排对齐::d3-js
- 画布饼图中的标签
- 谷歌饼图强制渲染“;次要的“;馅饼外的标签
- 在谷歌饼图中查看其他俱乐部类别
- Raphaeljs 将点击事件添加到饼图的一部分
- 如何使用javascript创建饼图
- 指定饼图高图的颜色
- 数据库、servlet、json、javascript和highchart饼图
- HighChart饼图点击图例项触发向下钻取
- 动态更改Highchart饼图的中心
- 在饼图切片(Highchart)中放置标签