javascript - 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 数据为:

[{"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

您可以尝试这样，根据 highcharts 更新接收到的 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;
});