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

Question

我想将累积图表转换为非累积图表。基本上我有演示向您展示:

这是累积图: 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 本身中的图表非累积？

编辑:

我还有一张图表，其中数据以不同的方式格式化: http://jsfiddle.net/h1qq1rj8/3/

Answer 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)