Highcharts显示空白区域

Question

我使用highcharts来表示销售/年度图表。这里我用java发送JSON数据如下：

  String query2 = "SELECT YEAR, SALES FROM ABC"; 
      PreparedStatement ps2 = conn1.prepareStatement(query2); 
      ResultSet rs = ps2.executeQuery(); 
      while (rs.next()) { 
       JSONObject ja = new JSONObject(); 
       ja.put("YEAR", rs.getInt("YEAR")); 
       ja.put("AMOUNT", rs.getDouble("SALES")); 
       array.add(ja); 
      } 
      out.print(array); 

JS：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<script> 
    $(document).ready(function() { 
    $.ajax({ 
     url: 'sales_data', 
     type: 'GET', 
     async: true, 
     dataType: "json", 
     success: function (data) { 
      visitorData (data); 
     } 
     }); 
    }); 
    function visitorData (data) { 
     $.each(data, function (i, point) { 
     point.y = point.data; 
    }); 
     var chart = new Highcharts.Chart({ 

     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 

     series: [{ 
      data: data 
     }] 

    }); 
    } 
</script> 

HTML：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

JSON数据recived为：

[{"YEAR":2011,"AMOUNT":7.68525076717E7},{"YEAR":2011,"AMOUNT":7982475.0849},{"YEAR":2012,"AMOUNT":8.95886875056E7},{"YEAR":2012,"AMOUNT":1.20452902934E7},{"YEAR":2016,"AMOUNT":5.48889823418E7},{"YEAR":2016,"AMOUNT":6435465.2701},{"YEAR":2017,"AMOUNT":1.09271367417E7},{"YEAR":2017,"AMOUNT":1551705.2601}] 

我遵循的例子是：http://jsfiddle.net/highcharts/uTyZk/

但输出结果是：标题和要导出的选项。没有图形生成。任何人都可以在这个建议我吗？

Answer 1

您可以尝试这样，根据高图更新接收到的JSON数据以填充图表。在你的情况JSON数据丢失name和y键

Fiddle Demo

var data=[{"YEAR":2011,"AMOUNT":7.68525076717E7},{"YEAR":2011,"AMOUNT":7982475.0849},{"YEAR":2012,"AMOUNT":8.95886875056E7},{"YEAR":2012,"AMOUNT":1.20452902934E7},{"YEAR":2016,"AMOUNT":5.48889823418E7},{"YEAR":2016,"AMOUNT":6435465.2701},{"YEAR":2017,"AMOUNT":1.09271367417E7},{"YEAR":2017,"AMOUNT":1551705.2601}] 
// Highcharts requires the y option to be set 
$.each(data, function (i, point) { 
    point.y = point.AMOUNT; 
    point.name = point.YEAR; 
});