数据库、servlet、json、javascript 和 highchart 饼图答案

【问题标题】：database, servlet, json , javascript and highchart pie chart数据库、servlet、json、javascript 和 highchart 饼图
【发布时间】：2016-04-11 12:00:45
【问题描述】：

我需要使用来自 servlet 的“json”数据生成动态“highchart”饼图，数据库方法运行正常，但 json 部分没有将任何数据传递给饼图。

'下面是我的 servlet 代码'

公共类 SubCountyAjaxApplications 扩展 HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    PrintWriter out = response.getWriter();

    ArrayList<Applications> Rawpplications = AdminDB.sub_countyApplications();

    response.setContentType("text/html");
    response.setHeader("Cache-control", "no-cache, no-store");
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Expires", "-1");

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    response.setHeader("Access-Control-Max-Age", "86400");

    Gson gson = new Gson();
    JsonArray results = new JsonArray();

    for (Applications application : Rawpplications) {
        JsonObject myObj = new JsonObject();
        myObj.addProperty("key",application.getSub_county());
        System.out.println(application.getSub_county()+":"+application.getAmount_applied());
        myObj.addProperty("value",application.getAmount_applied());
        results.add(myObj);
    }
    out.println(results.getAsJsonArray());
    out.close();

}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    doPost(request, response);
}

//下面是我的javascript文件，有标题但没有图表

        var chart;
        $(document).ready(
                function () {
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'chart',
                        },
                        title: {
                            text: 'County Application Distribution'
                        },
                        tooltip: {
                            formatter: function () {
                                var s;
                                if (this.point.name) { // the pie chart
                                    s = '' + this.point.name + ': ' + this.y
                                            + ' Bugs';
                                } else {
                                    s = '' + this.x + ': ' + this.y;
                                }
                                return s;
                            }
                        },
                        labels: {
                            items: [{
                                    html: '',
                                    style: {
                                        left: '40px',
                                        top: '8px',
                                        color: 'black'
                                    }
                                }]
                        },
                        series: [{
                                type: 'pie',
                                name: 'Total Bugs',
                                data: [],
                                center: [70, 50],
                                size: 50,
                                showInLegend: false,
                                dataLabels: {
                                    enabled: false
                                },
                            }, ]

                    },function getdata(chart) {
                        var tmp = "";
                        var receivedData = "";

                        $.ajax({
                            url: 'SubCountyAjaxApplications',
                            dataType: 'json',
                            error: function () {
                                alert("error occured!!!");
                            },
                            success: function (data) {
                                var chartData = [];
                                $.each(data.jsonArray, function (index)
                                {
                                    $.each(data.jsonArray[index],
                                            function (key, value) {
                                                var point = [];
                                                point.push(key);
                                                point.push(value);
                                                chartData.push(point);
                                            });
                                });
                                chart.series[0].setData(chartData);
                            }
                        });
                    });

                });

我哪里做错了

【问题讨论】：

那么，chartData 的内容是什么样的呢？控制台有错误吗？
无错误，图表标题显示但图表不存在，请查看servlet的json部分，是否有错误？
再次，您的 chartData 变量的输出是什么？我不知道是否有任何错误，因为我不知道您在解析什么或您要输出什么。
['changamw', 50,000],['Mombasa', 150,000],,,,,, 但是我得到这个输出 [{"key":"CHANGAMWE","label":"20,000 "},{"key":"JOMVU","label":"55,000"},{"key":"Kathiani","label":"42,000"},{"key":"KISAUNI","label ":"60,000"},{"key":"LIKONI","label":"20,000"},{"key":"Machakos Town","label":"15,000"},{"key":" MVITA","label":"15,000"},{"key":"NYALI","label":"35,000"}]，我该如何修改 servlet 上的 json 部分，因为有问题

标签： javascript json servlets highcharts

【解决方案1】：

假设您的 ajax 调用返回的数据是您在上面指定的格式：

[{"key":"CHANGAMWE","label":"20,000"},{"key":"JOMVU","label":"55,000"},{"key":"Kathiani","label":"42,000"},{"key":"KISAUNI","label":"60,000"},{"key":"LIKONI","label":"20,000"},{"key":"Machakos Town","label":"15,000"},{"key":"MVITA","label":"15,000"},{"key":"NYALI","label":"35,000"}]

你可以像这样改变你的解析循环来为 Highcharts 返回一个合适的数据数组：

var chartData = [];
$.each(data, function (i, node) {
    chartData.push( [ node.key, parseFloat(node.label) ] );
});

例子：

http://jsfiddle.net/jlbriggs/3d3fuhbb/134/

【讨论】：