Javascript 使用jQuery对Highcharts迭代JSON响应

我制作了一个servlet，用于创建映射对象：

Map<String, Integer> data = new LinkedHashMap<String, Integer>();

在检索数据并将其迭代到表中时，所有这些都可以正常工作。但我需要Highcharts插件的特殊格式：

series: [{
    name: 'Monday',
     data: [10]
    }, {
     name: 'Tuesday',
     data: [20]
  }, {
     name: 'Wednesday',
     data: [30]
    }, {
     name: 'Thursday',
     data: [40]          
    }, {
     name: 'Friday',
     data: [50]
    }, {
     name: 'Saturday',
     data: [60]            
    }, {
     name: 'Sunday',
     data: [70]             
}]

为了实现这一点，您必须创建如下所示的脚本：

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            rightMargin: 80
        },

        title: {
            text: 'Weekdays'
        },
        subtitle: {
            text: 'Source: somewhere in a calendar'
        },

         xAxis: {
            labels: {
                enabled: false
        }
        },

        yAxis: [
            {
                min: 0,
                title: {
                    text: 'Amount'
                 }
            },
            {
                linkedTo: 0,
                opposite: true
            }
        ],

         series: []
    };

    $.getJSON('WeekdayServlet', function(data) {

        var series = [];

        $.each(data, function(key, value) {

            series.name = key;
            series.data = value;

        options.series.push(data);
    });

    // Create the chart
    var chart = new Highcharts.Chart(options);

 }); 

无论如何，我在这里做错了什么。在迭代中或如何“初始化”系列中

以下是我的资料来源，以便更好地理解：

• （第3.1点案例研究：数据预处理）

---

应将

[]

映射到Java集合，如

列表

或数组。

{}

应该映射到

映射

或某个Javabean

因此，所需的JSON格式可以翻译/实现如下：

public class Serie {
    private String name;
    private Integer[] data;

    public Serie() {
        // Keep default c'tor alive.
    }

    public Serie(String name, Integer... data) {
        this.name = name;
        this.data = data;
    }

    // Add/generate getters/setters/etc.
}

及

List series=new ArrayList（）；
增加（新系列（“星期一”，10））；
增列(新系列"星期二",20);；
增加（新系列（“星期三”，30））；
// ...
映射数据=新的HashMap（）；
数据。put（“系列”，系列）；
// ...
字符串json=new Gson（）.toJson（数据）；
// ...

请告诉我们问题出在哪里？要么序列中填充了键/值对的最后一个索引，要么序列根本无法显示。我需要所有的。这表明push方法get将被覆盖，直到显示最后一个索引。尽管我需要它作为一种特殊的数组形式（如上面的系列示例所示），但使用这种方法，我不再需要在js代码中迭代。相反，我实际上可以从JSON响应中推送“data.series”。使用console.log（data&data.series）记录这两个变量也表明它具有正确的格式。但将其推到空数组似乎无论如何都失败了。JSON输出：“系列”：[{“名称”：“星期一”，“数据”：[10]}，{“名称”：“星期二”，“数据”：[20]}，{“名称”：“星期三”，“数据”：[30]}]。。。将此粘贴到JSFIDLE表明它应该可以工作。我必须先检查我的代码，然后再将您的答案标记为正确。。。有些事情似乎失败了。。。Sorry在javascript代码中还有一个bug。。。已使用选项创建图表，但未加载数据。尽管当我设置断点时它正在工作。因此，我不得不重写脚本以强制使用变量的顺序。因此，

getJSON（）

回调在后台的单独线程中运行。您希望仅在回调结束时或回调返回时设置选项。

public class Serie {
    private String name;
    private Integer[] data;

    public Serie() {
        // Keep default c'tor alive.
    }

    public Serie(String name, Integer... data) {
        this.name = name;
        this.data = data;
    }

    // Add/generate getters/setters/etc.
}

List<Serie> series = new ArrayList<Serie>();
series.add(new Serie("Monday", 10));
series.add(new Serie("Tuesday", 20));
series.add(new Serie("Wednesday", 30));
// ...
Map<String, Object> data = new HashMap<String, Object>();
data.put("series", series);
// ...
String json = new Gson().toJson(data);
// ...