1

我正在尝试使用 json 数据制作一个类似于此演示中的 highcharts 图表：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
            }],
   });
4

1 回答 1

0

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

在查看了它的格式以及如何将数据添加到脚本之后，似乎可以使用几个 for 循环，但我认为您需要稍微更改 JSON 格式。

这是我的做法（伪代码）：

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

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

然后通过循环并获取所有天数，在 highcharts 调用中设置“类别”选项：

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

然后在 highcharts 配置中：

 xAxis: {
            categories: myCategories
        },

然后你需要做的就是再次在 highchars 'series' 调用中设置你的数据点，这将涉及更多一点，但同样的想法。

希望这可以帮助

于 2013-01-30T09:51:03.680 回答