Question

我正在尝试制作类似于此演示中的高图图表：http://www.highcharts.com/demo/column-basic带有json数据，但我无法看到如何在一个明智的事情中解析我的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

您可以在jsfiddle中编辑该示例：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" 
    }
];

然后在highcharts调用中设置'categories'选项，循环显示并获取所有日期：

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

然后在highcharts配置中：

 xAxis: {
            categories: myCategories
        },

然后你需要做的就是在高调'系列'调用中设置你的数据点同样的事情，这将是一个更多的参与，但相同的想法。

希望这有帮助

Highcharts：解析多变量JSON数据

1 个答案: