Question

我正在实施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]
        }]
    });
});

我希望图例只显示堆积面积图中的最后一个值。例如，我做了一个fiddle，我想要显示的图例 ITEM1：964 项目2:22 ITEM3：231

Answer 1

使用labelFormatter可以做到这一点。

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

您可以访问this，这是指将要添加到图例中的系列。因此，要获得最后一个值，您可以找出数据中有多少元素，然后拉出该y值并附加到格式化程序中。这是没有记录的，您也可以改为this.options.data。请注意，如果您有x / y /属性格式的数据（如时间/值等），您需要明确告诉它要选择哪个数据[索引] .XXXXXX。

<强> DEMO.

Highcharts：显示图例中堆积图表的最后值

1 个答案: