使用highcharts将累积图表转换为非累积图表

时间:2016-11-07 11:22:08

标签: javascript jquery highcharts

我想将累积图表转换为非累积图表。基本上我有演示给你看:

这是累积图: http://jsfiddle.net/h1qq1rj8/

这是非累积图: http://jsfiddle.net/h1qq1rj8/2/

$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },    
        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },    
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },    
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },    
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },    
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },    
        series: [{
            name: 'John',
            data: [1, 8, 12, 13, 23], // I need to convert this data to non-cumulative
            stack: 'male'
        }]
    });
});

我有累积数据,将其转换为非累积我在后端减去数据,但由于我的性能变慢,是不是有选项让图表在highcharts API本身不累积?< / p>

编辑:

我还有一个图表,其中数据的格式不同: http://jsfiddle.net/h1qq1rj8/3/

1 个答案:

答案 0 :(得分:1)

在绘制图表之前,Highcharts不会对您的数据进行计算,但您可以将此特定部分的计算从服务器端移动到客户端。

您可以使用阵列上的reduce函数来获得所需的结果:

old_ar = [1, 8, 12, 13, 23]
new_ar = old_ar.reduce(function(a, b, c, d) { if (a.length) {a.push(d[c]-d[c-1])} else {a = [b]} return a;}, [])
console.log(new_ar)

对于第二种数据样式,您可以使用:

old_ar = [[0,1],[1,8],[2,12],[3,13],[4,23]]
new_ar = old_ar.reduce(function(a, b, c, d) { if (a.length) {a.push([d[c][0], d[c][1]-d[c-1][1]])} else {a = [b]} return a;}, [])
console.log(new_ar)