Question

我正在做一个Web应用程序，我试图将数据从servlet传递到JSP，以便可以在Highchart中使用它。我正在创建一个动态对象的JSON数组，我使用AJAX将它传递给我的JSP。示例JSON数组如下所示：

[{"data":[2,4,6,6,0,0,0,0,0,0,0,0],"name":"DESIGN"},
{"data":[1,0,0,1,0,0,0,0,0,0,0,0],"name":"COLOUR"}]

我希望每个阵列都用作HighChart系列，其中"name"是系列的名称，"data"是表示月销售额的数组。在阅读了大量的例子之后，我仍然没有成功地尝试从我的AJAX成功函数中解析数组：

$.ajax({
            type : 'GET',
            url : '/InventoryManagement/dashboardData',
            datatype : 'json',
            success : function(data) {
                var dataObj = JSON.parse(data);
                var seriesArr = new Array();
                $.each(dataObj, function(key, d) {
                    var series = {
                        name : key,
                        data : []
                    };
                    series.key = key;
                    series.d = d;

                    seriesArr.push(series);
                });


                $(function () {
                    var options = {
                        chart : {
                            renderTo : 'overallSales',
                            type : 'column'
                        },
                        title : {
                            text : 'Overal Unit Sales'
                        },
                        xAxis : {
                            categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                    'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
                        },
                        yAxis : {
                            title : {
                                text : 'Units sold'
                            }
                        },
                        series : seriesArr

                    };
                    var chart = new Highcharts.Chart(options);
                });
            }

我知道我没有正确传递$.each中的数据，但这是我第一次使用AJAX，JSON或Highcharts，所以请告诉我如何解决这个问题！

Answer 1

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Overal Unit Sales'
            },
            xAxis: {
                categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                    'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Value',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: 'unit'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 80,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: dataObj
        });
    });

container是您放置图表的图表父元素ID

只需在Highchart中将dataObj添加到系列选项中。在您的代码中，您没有提到放置的位置。

DEMO

来自JSON数组的Highchart系列

1 个答案: