Highcharts 曲线自定义最大值、最小值标签

发表于 更新于 分类于 阅读次数： 本文字数： 152 阅读时长 ≈ 1 分钟

主要通过 Renderer 添加文字标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Highcharts custom label'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    }, function (chart) { // on complete
        var min = 1000,
            max = 0,
            pointsToShow = [0, 0],
            points = chart.series[0].points;
        Highcharts.each(points, function(p) {
            if(p.y>max) {
                pointsToShow[0] = p.index;
                max = p.y;
            }
            if(p.y<min) {
                pointsToShow[1] = p.index;
                min = p.y;
            }
        });
        render(chart, points[pointsToShow[0]], 'Max');
        render(chart, points[pointsToShow[1]], 'Min');
        //var point = chart.series[0].points[8];
    });
    function render(chart, point, text) {
        chart.renderer.label(text + ': ' + point.y,  point.plotX + chart.plotLeft -20 , point.plotY + chart.plotTop - 45, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
            .css({
            color: '#FFFFFF',
            align: 'center',
        })
            .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        })
            .add();
    }
});

参考文档：
绘制自定义标签