Kendo堆叠条形图：含负值时StackValue无法显示正确总和

问题场景 #

用户定义了如下Kendo堆叠条形图：

$("#chart").kendoChart({
    title: {
        text: ""
    },            
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "bar",
        stack: true
    },
    series: [{
        name: "Value1",
        data: [-40, 32, 34, 36, 45, 33, -34, 83, 36, 37, 44, 37, 35, 36, 46],
        color: "#f3ac32"
    }, {
        name: "Value2",
        data: [19, 25, -21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
        color: "#b8b8b8"
    }, {
        name: "Value3",
        data: [17, 17, 16, -28, 34, 30, 25, 30, -27, -37, 25, 33, 26, 36, 29],
        color: "#bb6e36",
        labels: {
            template: "#= stackValue #",
            visible: true
        },
    }],
    valueAxis: {
        max: 180,
        line: {
            visible: false
        },
        minorGridLines: {
            visible: true
        }
    },
    categoryAxis: {
        categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
    }
});

生成的图表展示如下：

用户在最后一个数据系列中添加了标签，期望通过stackValue计算堆叠条形的总和，但包含负值的条形未被正确计入总和，需要解决如何让每个数据的堆叠总和显示正确的问题。

解决方法 #

Kendo Chart的stackValue默认仅计算同符号的堆叠值总和（正值堆在一起，负值堆在一起），如果需要计算所有值的代数和，需要自定义标签模板，手动累加对应分类下的所有系列数据：

1. 先把所有系列的数据整理到一个数组中，方便后续获取对应分类的所有值：

const seriesData = [
    [-40, 32, 34, 36, 45, 33, -34, 83, 36, 37, 44, 37, 35, 36, 46],
    [19, 25, -21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
    [17, 17, 16, -28, 34, 30, 25, 30, -27, -37, 25, 33, 26, 36, 29]
];

2. 修改标签的template，使用自定义函数计算总和：

labels: {
    template: function(e) {
        // 获取当前数据点的分类索引
        const categoryIndex = e.categoryIndex;
        // 累加该索引下所有系列的数值
        let total = 0;
        seriesData.forEach(series => {
            total += series[categoryIndex];
        });
        return total;
    },
    visible: true
}

3. 完整修改后的代码：

const seriesData = [
    [-40, 32, 34, 36, 45, 33, -34, 83, 36, 37, 44, 37, 35, 36, 46],
    [19, 25, -21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
    [17, 17, 16, -28, 34, 30, 25, 30, -27, -37, 25, 33, 26, 36, 29]
];

$("#chart").kendoChart({
    title: {
        text: ""
    },            
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "bar",
        stack: true
    },
    series: [{
        name: "Value1",
        data: seriesData[0],
        color: "#f3ac32"
    }, {
        name: "Value2",
        data: seriesData[1],
        color: "#b8b8b8"
    }, {
        name: "Value3",
        data: seriesData[2],
        color: "#bb6e36",
        labels: {
            template: function(e) {
                const categoryIndex = e.categoryIndex;
                let total = 0;
                seriesData.forEach(series => {
                    total += series[categoryIndex];
                });
                return total;
            },
            visible: true
        },
    }],
    valueAxis: {
        max: 180,
        line: {
            visible: false
        },
        minorGridLines: {
            visible: true
        }
    },
    categoryAxis: {
        categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
    }
});

这样就能正确计算每个分类下所有数据的代数总和，不管正负值都会被计入。

内容的提问来源于stack exchange，提问作者AJ31