【问题标题】:iterate JSON response with jQuery for Highcharts使用 jQuery for Highcharts 迭代 JSON 响应
【发布时间】:2011-03-25 12:50:41
【问题描述】:

我制作了一个 servlet,它创建了一个地图对象:

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

使用google JSON填写数据并返回JSON格式的响应:

String json = new Gson().toJson(data);

在检索数据并将它们迭代到表中时,所有这些都可以正常工作。但我需要 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);

 }); 

无论如何,我在这里做错了。无论是在迭代中还是我如何“初始化”系列

这里是我更好理解的来源:

【问题讨论】:

  • 介意告诉我们问题出在哪里吗?
  • 任一系列都被键/值对的最后一个索引填充,或者系列根本无法显示。我需要所有这些。这指出 push 方法 get 被覆盖,直到显示最后一个索引。虽然我需要它作为一个特殊的数组形式(如上面的系列示例所示)。

标签: javascript jquery json servlets highcharts


【解决方案1】:

[] 应该映射到 Java 集合,例如 List 或数组。 {} 应该映射到 Map 或一些 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<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);
// ...

【讨论】:

  • 通过这种方法,我不再需要在 js 代码中进行迭代。相反,我可以从 JSON 响应中推送“data.series”。使用 console.log (data & data.series) 记录这两个变量也表明它具有正确的格式。但是将它推到空数组似乎无论如何都失败了。 JSON 输出:"series":[{"name":"Monday","data":[10]},{"name":"Tuesday","data":[20]},{"name":"星期三","数据":[30]}]... 将其粘贴到 jsfiddle 表明它应该可以工作。
  • 我必须先检查我的代码,然后再将您的答案标记为正确......有些事情似乎失败了......对不起
  • 我在 javascript 代码中也有一个错误...图表是使用选项创建的,但未加载数据。尽管当我设置断点时它正在工作。所以我不得不重写脚本来强制使用变量的顺序。谢谢
  • 是的,getJSON() 回调在后台的单独线程中运行。您只想在回调结束或回调返回时设置选项。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-16
  • 2015-05-15
  • 1970-01-01
  • 2019-01-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多