首页 > highcharts 柱状图数据的设置

highcharts 柱状图数据的设置

highcharts官方生成柱状图的例子:

xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]

series的data数据,是严格要对应xAxis的,这样感觉很麻烦。

而我直接从后台获取的json字符串是以下这样的。
//我这个legend相当于上面的xAxis

{
{"legend":"苹果","series-name":"1月","series-data":"300"},
{"legend":"苹果","series-name":"2月","series-data":"40"},
{"legend":"梨子","series-name":"1月","series-data":"100"},
{"legend":"火龙果","series-name":"7月","series-data":"200"},
{"legend":"草莓","series-name":"1月","series-data":"400"},
}

请问有没有什么办法,将这样的数据统计成highcharts的柱状图?
我想了挺久都没找到一个思路。请大神们赐教!


你这数据是每种legend都有对应的1月到12月么?
我就假设你的数据每一种从1到12月都有的情况下,

var legends = [{"legend":"苹果","series-name":"1月","series-data":"300"},
{"legend":"苹果","series-name":"2月","series-data":"40"},
{"legend":"梨子","series-name":"1月","series-data":"100"},
{"legend":"火龙果","series-name":"7月","series-data":"200"},
{"legend":"草莓","series-name":"1月","series-data":"400"}];

var res = {};
var monthExp = new RegExp('(\\d+)月', 'g');
legends.forEach(function(e,i){
    var monthIndex = e['series-name'].replace(monthExp, function(all, month){
            return parseInt(month);
        });
    if(!res[e.legend]){
        res[e.legend] = {};
        res[e.legend].data = [];
    }
    res[e.legend].data[monthIndex] = e["series-data"];
});
console.log(res);

细节我没处理,比如出来的res的data数组都会多出一个,还有其他杂七杂八的= =

【热门文章】
【热门文章】