高级图表:解析多变量JSON数据

Question

我正在尝试制作一个类似于本演示中的图表的高级图表:使用json数据的http://www.highcharts.com/demo/column-basic，但我不知道如何在合理的情况下解析json数据。我的数据按星期分类，分为三类.以下是一个例子：

{ "Monday": { "inv": 1126, "oppm": 276, "perc": "24.51" }, "Tuesday": { "inv": 1072, "oppm": 273, "perc": "25.47" }, "Wednesday": { "inv": 1032, "oppm": 271, "perc": "26.26" }, "Thursday": { "inv": 989, "oppm": 259, "perc": "26.19" }, "Friday": { "inv": 937, "oppm": 240, "perc": "25.61" } }

有办法在简单的事情上做到这一点吗？如果我改变我的json数据结构会有帮助吗？

提前感谢！

编辑:解决方案：

我找到了一种不太复杂的方法，尽管我相信如果你知道你的JS，它会更容易做。无论如何，这个解决方案与我的JSON数据一起工作得很好：

//Convert received AJAX data
success: function(data)
{                       
    cleanData = $.parseJSON(data);

    //Make some empty arrays for the categories and data
    days = Array();
    inv = Array();
    oppm = Array();
    perc = Array();

    //Iterate the data and fill in the new arrays
    $.each(cleanData, function(index, value) {
        days.push(index);
        inv.push(parseFloat(value['inv']));
        oppm.push(parseFloat(value['oppm']));
        perc.push(parseFloat(value['perc']));
    });

    //Use the new arrays in the chart
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'div_chart',
            type: 'column'
        },
        xAxis:{
            categories: days,
            title: {
                text: 'Week day'
            }
        },
        series: [{
                name: 'Invited',
                data: inv
            }, {
                name: 'Met',
                data: oppm
            }, {
                name: '%',
                data: perc
            }],
   });

Answer 1

您可以在这里编辑这个示例：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/

在查看了如何对其进行格式化以及如何将数据添加到脚本之后，似乎有几个for循环可以工作，但我认为您需要稍微更改JSON格式。

下面是我要做的方法(psueodocode)：

var json = [
    {
        "day":"monday",
        "inv": 1126, 
        "oppm": 276, 
        "perc": "24.51"

    },
    {
         "day":"Tuesday",
         "inv": 1072, 
         "oppm": 273, 
         "perc": "25.47" 
    }
];

然后，通过循环遍历高海图调用中的“类别”选项，并获得所有的时间：

var myCategories;
var idx=0;
for (var key in json) {
    myCategories[idx]=json[key]['day'];
    idx++;
}

然后在High图表配置中：

 xAxis: {
            categories: myCategories
        },

然后，您所需要做的就是再次做相同的事情，在highchars的“系列”调用中设置您的数据点，这将涉及到更多的内容，但也是相同的想法。

希望这能有所帮助