页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

版本 1 下一个 »

示例仅供参考,若是实际场景和示例需求场景有所差别,有可能需要自行调整宏代码。

说明

如何实现堆积柱图上显示合计值,就是在红框位置显示合计值。

 

设置步骤

1.创建好堆积柱图,如下:

 

2.新建客户端模块:


3.具体宏代码如下:

 

 注:此宏代码不支持同时显示柱图的数据标签,若是需要显示数据标签,需要修改宏代码。

/**
 * 宏类型:ClientSide(服务端)
 * 对象:chart
 * 事件:afterRenderer
 */
 function main(chartView) {
    var options = chartView.getChartObject().getOptions();
    var series = options.series;
    var totals = buildTotal(series);
    var lastIndex = series.length - 1;
    series[lastIndex].label = {
        normal: {
            position: 'top',
            show: true,
            formatter: function(a) {
                return totals[a.dataIndex];
            }
        },
        emphasis: {
            position: 'top',
            show: true,
            formatter: function(a) {
                return totals[a.dataIndex];
            }
        }
    }
    chartView.getChartObject().getChart().setOption(options);
}
function buildTotal(series) {
    var totalLength = series[0].data.length;
    var totals = [];
    for (var k = 0; k < totalLength; k++) {
        totals[k] = 0;
    }
    for (var i = 0; i < series.length; i++) {
        for (var j = 0; j < series[i].data.length; j++) {
            totals[j] += getValue(series[i].data[j].value);
        }
    }
    return totals;
}

//获取数据项的值
function getValue(value) {
    if (Array.isArray(value)) {
        return value[1];
    } else {
        value;
    }
}

 

4.最终效果图:

示例资源:堆积柱图显示合计值.xml

  • 无标签