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

显示空白的Highcharts

1 个答案: