Question

我想从数据库中使用ajax get data，并使用highcharts来显示。但是现在ajax返回这样的数据：

数据： [{＆＃34; employeeCode＆＃34;：12261600，＆＃34;工作＆＃34;：5，＆＃34; beforeWork＆＃34;：11，＆＃34 ; employeeName＆＃34;：＆＃34; Tom＆＃34;}，{＆＃34; employeeCode＆＃34;：12271407，＆＃34; working＆＃34;：4，＆＃34; beforeWork＆＃34;：12，＆＃34; employeeName＆＃34;：＆＃34; Peter＆＃34;} {＆＃34; employeeCode＆＃34;：12272570，＆＃34; working＆＃34;：5，＆＃34; beforeWork＆＃34;： 12，＆＃34; employeeName＆＃34;：＆＃34;凯特＆＃34;}]

当我使用highcharts显示这些数据时，我的页面没有显示任何内容，哪里出错了？

我的HTML代码：

<!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>

无法显示任何内容：

Answer 1

像这样更新

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演示

更新

data.map(function(el,i){
   data[i]=({x:el.working,y:el.beforeWork,z:el.employeeCode,employeeName:el.employeeName}); 
})

Highcharts无法显示ajax的返回数据

1 个答案: