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