Highcharts无法显示Ajax的返回数据 [英] Highcharts can not display ajax's return data
本文介绍了Highcharts无法显示Ajax的返回数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用ajax从数据库中获取数据，并使用highcharts来显示。但现在ajax返回如下数据：
data： [{employeeCode：12261600，working：5，beforeWork：11，employeeName：Tom}，{employeeCode12271407，working4，beforeWork12，雇员姓名：彼得} {employeeCode：12272570，working：5，beforeWork：12，employeeName：Kate}]
当我使用highcharts来显示这些数据时，我的页面不显示任何内容，哪里出错？ 我的html代码：
<！DOCTYPE html>
< head>
< meta charset =UTF-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta content =width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = noname =viewport>>
< script src =$ {rc.contextPath} /statics/libs/jquery.min.js>< / script>
< script src =$ {rc.contextPath} /statics/libs/bootstrap.min.js>< / script>
< script src =$ {rc.contextPath} /statics/libs/echarts.min.js>< / script>
< script src =$ {rc.contextPath} /statics/libs/jquery-ui.js>< / script>
< script src =$ {rc.contextPath} /statics/libs/highcharts.js>< / script>
< script src =$ {rc.contextPath} /statics/libs/highcharts-more.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃echartDiv'）。hide（）;
$（'＃searchGrouping'）。click（function（）{
var params = {};
params.employeeCode = $ .trim（$（'＃employeeCode'）。val（））;
params.employeeName = $ .trim（$（'＃ ）;
$ .ajax（{
type：'POST'，
url：'queryEmployeeShowECharts'，
data：params，
async：true，
dataType：'json'，
contentType：application / x-www-form-urlencoded; charset = utf-8，
success：function（data）{
if（data.length> 0）{
$（'＃echartDiv'）。highcharts（{
chart：{
type：'bubble'，
plotBorderWidth：1，
zoomType：'xy'
}，
title：{
text：'test'
}，
xAxis：{
gridLineWidth：1
}，
yAxis：{
startOnTick：false，
endOnTick：false
}，
tooltip：{
useHTML：true，
pointFormat：'{point.working}'+
'{point.beforeWork}< br />'+
'{point.employeeCode}< br / >'+
'{point.empl oyeeCode}'，
followPointer：true
}，
plotOptions：{
series：{
dataLabels：{
enabled：true，
格式：'{point.employeeName}'
}
}
}，
系列：[{
data：data，
}]
}）;
$（'＃echartDiv'）。show（）;
}
else {
$（'＃echartDiv'）。hide（）;
}
}，
错误：函数（resp）{
$ b $}
}）;
}）;
}）;
< / script>
< / head>
< body>
< div class =tablebox>
< table>
< tr>
< td style =width：20％;>雇员< / td>
< td>< input type =textid =employeeCode />< / td>
< / tr>
< tr>
< ; td> name< / td>
< td style =text-align：left;>< input type =textid =employeeNamestyle =width：40％; height： 30px; border：1px solid black; font-size：1.3em;/>< / td>
< / tr>
< tr>
< td colspan = 2>
< button id =searchGroupingclass =btn btn-primary>搜索< / button>
< / td>
< / tr> ;
< / table>
< / div>
< div id =echartDiv>
< / div>
< / body> ;
< / html>
无法显示任何内容：
解决方案
像这样更新
var data = [{
employeeCode：10061600，
working： 5，
beforeWork：11，
employeeName：Tom
}，{
employeeCode：10071407，
working：4，
beforeWork：12，
employeeName：Peter
}，{
employeeCode：10072570，
working：5，
beforeWork：12，
employeeName：Kate
}]
data.map（（el，i）=> {
data [i] =（{
x：el.working，
y：el.beforeWork，
z：el.employeeCode，
employeeName：el.employeeName
}）;
}）
更新c $ c> data.map（function（el，i）{
data [i] =（{x：el.working，y：el.beforeWork，z：el.employeeCode，employeeName：el.employeeName} ）;
}）
I want to use ajax get data from database,and use highcharts to display.But now ajax returns data like this:
data:[{"employeeCode":12261600,"working":5,"beforeWork":11,"employeeName":"Tom"}, {"employeeCode":12271407,"working":4,"beforeWork":12,"employeeName":"Peter"} {"employeeCode":12272570,"working":5,"beforeWork":12,"employeeName":"Kate"}]
When I use highcharts to display this data，my page doesn't show anything,where is wrong?
My html code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">>
<script src="${rc.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${rc.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${rc.contextPath}/statics/libs/echarts.min.js"></script>
<script src="${rc.contextPath}/statics/libs/jquery-ui.js"></script>
<script src="${rc.contextPath}/statics/libs/highcharts.js"></script>
<script src="${rc.contextPath}/statics/libs/highcharts-more.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#echartDiv').hide();
$('#searchGrouping').click(function(){
var params = {};
params.employeeCode = $.trim($('#employeeCode').val());
params.employeeName = $.trim($('#employeeName').val());
$.ajax({
type: 'POST',
url: 'queryEmployeeShowECharts',
data: params,
async: true,
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function (data) {
if (data.length>0) {
$('#echartDiv').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'test'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.working}' +
'{point.beforeWork}<br/>' +
'{point.employeeCode}<br/>' +
'{point.employeeCode}',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.employeeName}'
}
}
},
series: [{
data: data,
}]
});
$('#echartDiv').show();
}
else{
$('#echartDiv').hide();
}
},
error:function(resp){
}
});
});
});
</script>
</head>
<body>
<div class="tablebox">
<table>
<tr>
<td style="width: 20%;">employee</td>
<td><input type="text" id="employeeCode/></td>
</tr>
<tr>
<td>name</td>
<td style="text-align: left;"><input type="text" id="employeeName"style="width: 40%;height:30px ;border:1px solid black;font-size: 1.3em;"/></td>
</tr>
<tr>
<td colspan="2">
<button id="searchGrouping" class = "btn btn-primary">search </button>
</td>
</tr>
</table>
</div>
<div id="echartDiv">
</div>
</body>
</html>
Can not show anything:
解决方案
Update like this
var data = [{
"employeeCode": 10061600,
"working": 5,
"beforeWork": 11,
"employeeName": "Tom"
}, {
"employeeCode": 10071407,
"working": 4,
"beforeWork": 12,
"employeeName": "Peter"
}, {
"employeeCode": 10072570,
"working": 5,
"beforeWork": 12,
"employeeName": "Kate"
}]
data.map((el, i) => {
data[i] = ({
x: el.working,
y: el.beforeWork,
z: el.employeeCode,
employeeName: el.employeeName
});
})
fiddle demo
Update
data.map(function(el,i){
data[i]=({x:el.working,y:el.beforeWork,z:el.employeeCode,employeeName:el.employeeName});
})
这篇关于Highcharts无法显示Ajax的返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
