Highcharts не может отображать данные возврата ajax

Я хочу использовать ajax для получения данных из базы данных и использовать высокие диаграммы для отображения. Но теперь ajax возвращает данные, подобные этим:

данные:[{"employeeCode": 12261600, "работающий":5,"beforeWork":11,"employeeName":"Tom"}, {"employeeCode":12271407,"рабочий":4,"beforeWork":12,"employeeName":"Peter"} {"employeeCode":12272570,"working":5,"beforeWork":12,"employeeName":"Kate"}]

Когда я использую высокие графики для отображения этих данных, моя страница ничего не показывает, в чем проблема?

Мой 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>

Ничего не могу показать

Источник

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
  });
})

демонстрация скрипки

Обновить

data.map(function(el,i){
   data[i]=({x:el.working,y:el.beforeWork,z:el.employeeCode,employeeName:el.employeeName}); 
})
Источник
Другие вопросы по тегам