Javascript Highcharts：在图例中显示堆叠图表中的最后一个值

我正在从Highcharts实现一个堆叠面积图。 此图表有一个图例，其中还显示鼠标所在位置的不同数据的值。 这是我的密码：

$(function () {
    Highcharts.getOptions().colors[0] = "#2f7ed8";
    $('#container').highcharts({
        chart: {
            type: 'area',
            zoomType: 'x',
            marginRight: 200
        },
        title: {
            text: 'ITEMS'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 14 * 24 * 3600000, // fourteen days
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: 'Nombre'
            },
        },
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y}</b> </n>'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                }
            }
        },
        credits: {
            enabled: false
        },

        series: [{
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2013, 10, 08),
            name: 'ITEM1',
            color: 'rgb(0,115,174)',
            data: [301, 309, 312, 312, 312, 312, 334, 334, 335, 342, 342, 342, 343, 351, 357, 360, 363, 363, 363, 372, 379, 383, 386, 388, 388, 388, 391, 393, 396, 400, 401, 401, 401, 402, 406, 409, 409, 411, 411, 411, 416, 420, 422, 424, 425, 425, 425, 427, 428, 428, 428, 430, 430, 430, 433, 437, 437, 442, 445, 445, 445, 447, 453, 456, 460, 465, 465, 465, 470, 473, 478, 478, 481, 481, 481, 484, 486, 488, 497, 498, 498, 498, 505, 509, 512, 514, 517, 517, 517, 521, 526, 530, 532, 535, 535, 535, 543, 548, 550, 555, 559, 559, 559, 560, 564, 572, 575, 577, 577, 577, 582, 585, 590, 596, 597, 597, 597, 599, 601, 606, 608, 617, 617, 617, 623, 625, 628, 629, 630, 630, 630, 632, 633, 635, 635, 639, 639, 639, 643, 649, 651, 660, 668, 668, 668, 696, 701, 704, 708, 711, 711, 711, 717, 734, 749, 756, 768, 768, 768, 785, 801, 809, 816, 822, 822, 822, 822, 829, 840, 853, 874, 874, 874, 887, 895, 889, 889, 880, 880, 880, 904, 964]
        }, {
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2013, 10, 08),
            name: 'ITEM2',
            color: 'rgb(249,193,8)',
            data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 10, 14, 14, 14, 14, 15, 15, 17, 19, 19, 19, 17, 18, 20, 20, 20, 20, 20, 22, 22]
        }, {
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2013, 10, 08),
            name: 'ITEM3',
            color: 'rgb(35,173,202)',
            data: [57, 57, 60, 60, 60, 60, 60, 60, 61, 61, 61, 61, 61, 62, 62, 62, 62, 62, 62, 63, 64, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 66, 66, 66, 66, 66, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 68, 68, 68, 68, 68, 68, 68, 69, 69, 69, 69, 69, 69, 70, 71, 73, 77, 78, 78, 78, 79, 79, 79, 80, 80, 80, 80, 83, 84, 84, 85, 88, 88, 88, 88, 89, 93, 94, 94, 94, 94, 97, 98, 98, 100, 100, 100, 100, 100, 102, 102, 105, 107, 107, 107, 108, 110, 113, 113, 114, 114, 114, 115, 115, 115, 115, 117, 117, 117, 117, 119, 120, 124, 127, 127, 127, 132, 132, 132, 133, 134, 134, 134, 134, 136, 136, 136, 137, 137, 137, 137, 137, 140, 140, 141, 141, 141, 142, 147, 149, 149, 153, 153, 153, 155, 159, 163, 166, 170, 170, 170, 170, 172, 178, 185, 194, 194, 194, 189, 196, 206, 206, 211, 211, 211, 229, 231]
        }]
    });
});

$（函数（）{
Highcharts.getOptions（）.colors[0]=“2f7ed8”；
$（“#容器”）。高图({
图表：{
类型：'区域'，
zoomType:'x'，
右边：200
},
标题：{
文本：“项目”
},
xAxis：{
键入：“日期时间”，
maxZoom:14*24*3600000，//十四天
标题：{
文本：空
}
},
亚克斯：{
标题：{
文本：“Nombre”
},
},
工具提示：{
分享：真的
},
图例：{
布局：“垂直”，
对齐：“右”，
labelFormat:“{name}:{point.y}”
},
打印选项：{
面积：{
堆叠：“正常”，
国家：{
悬停：{
线宽：5
}
},
标记：{
已启用：false
}
}
},
学分：{
已启用：false
},
系列：[{
点间距：24*3600*1000，
起点：UTC日期（2013年10月8日），
名称：'ITEM1'，
颜色：“rgb（0115174）”，
数据：[301, 309, 312, 312, 312, 312, 334, 334, 335, 342, 342, 342, 343, 351, 357, 360, 363, 363, 363, 372, 379, 383, 386, 388, 388, 388, 391, 393, 396, 400, 401, 401, 401, 402, 406, 409, 409, 411, 411, 411, 416, 420, 422, 424, 425, 425, 425, 427, 428, 428, 428, 430, 430, 430, 433, 437, 437, 442, 445, 445, 445, 447, 453, 456, 460, 465, 465, 465, 470, 473, 478, 478, 481, 481, 481, 484, 486, 488, 497, 498, 498, 498, 505, 509, 512, 514, 517, 517, 517, 521, 526, 530, 532, 535, 535, 535, 543, 548, 550, 555, 559, 559, 559, 560, 564, 572, 575, 577, 577, 577, 582, 585, 590, 596, 597, 597, 597, 599, 601, 606, 608, 617, 617, 617, 623, 625, 628, 629, 630, 630, 630, 632, 633, 635, 635, 639, 639, 639, 643, 649, 651, 660, 668, 668, 668, 696, 701, 704, 708, 711, 711, 711, 717, 734, 749, 756, 768, 768, 768, 785, 801, 809, 816, 822, 822, 822, 822, 829, 840, 853, 874, 874, 874, 887, 895, 889, 889, 880, 880, 880, 904, 964]
}, {
点间距：24*3600*1000，
起点：UTC日期（2013年10月8日），
名称：'ITEM2'，
颜色：“rgb（249193,8）”，
数据：[3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 10, 14, 14, 14, 14, 15, 15, 17, 19, 19, 19, 17, 18, 20, 20, 20, 20, 20, 22, 22]
}, {
点间距：24*3600*1000，
起点：UTC日期（2013年10月8日），
名称：“项目3”，
颜色：“rgb（35173202）”，
数据：[57, 57, 60, 60, 60, 60, 60, 60, 61, 61, 61, 61, 61, 62, 62, 62, 62, 62, 62, 63, 64, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 66, 66, 66, 66, 66, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 68, 68, 68, 68, 68, 68, 68, 69, 69, 69, 69, 69, 69, 70, 71, 73, 77, 78, 78, 78, 79, 79, 79, 80, 80, 80, 80, 83, 84, 84, 85, 88, 88, 88, 88, 89, 93, 94, 94, 94, 94, 97, 98, 98, 100, 100, 100, 100, 100, 102, 102, 105, 107, 107, 107, 108, 110, 113, 113, 114, 114, 114, 115, 115, 115, 115, 117, 117, 117, 117, 119, 120, 124, 127, 127, 127, 132, 132, 132, 133, 134, 134, 134, 134, 136, 136, 136, 137, 137, 137, 137, 137, 140, 140, 141, 141, 141, 142, 147, 149, 149, 153, 153, 153, 155, 159, 163, 166, 170, 170, 170, 170, 172, 178, 185, 194, 194, 194, 189, 196, 206, 206, 211, 211, 211, 229, 231]
}]
});
});

我希望图例仅显示堆叠面积图中的最后一个值。 例如，我制作了一个图标，我希望显示图例 项目1:964 项目2:22 第3项：231

这可以使用

labelFormatter:function（）{
var lastVal=this.yData[this.yData.length-1]；
返回“+this.name+”：“+lastVal+”；
}

您可以访问

this

，它指的是将要添加到图例中的系列。因此，要获取最后一个值，您需要找出数据中有多少元素，然后拉出该y值并附加到格式设置程序中。这是未记录的，您也可以改为执行

this.options.data

。请注意，如果如果有x/y/属性格式的数据（如时间/值等），则需要明确告诉它要选择哪个数据[index].XXXXXX

    labelFormatter: function() {
        var lastVal = this.yData[this.yData.length - 1];
            return '<span style="color:' + this.color + '">' + this.name + ':</span> <b>' + lastVal + '</b> </n>';
    }