Highcharts can not display ajax's return data

2019-08-02 17:14发布

站内文章 / 移动开发
53 0 0

问题:

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:

回答1:

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 bubble-chart
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~