数据标签重叠处理演示 | JShare

$(function () {
    var chart = new Highcharts.Chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: '各洲不同时间的人口条形图'
        },
        subtitle: {
            text: '数据来源: Wikipedia.org'
        },
        xAxis: {
            categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '人口总量 (百万)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' 百万'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                    // ,allowOverlap 默认是 false，即不允许数据标签重叠
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: '1800 年',
            data: [107, 31, 635, 203, 2]
        }, {
            name: '1900 年',
            data: [133, 156, 947, 408, 6]
        }, {
            name: '2008 年',
            data: [973, 914, 4054, 732, 34]
        }]
    });
    $('input').click(function() {
        var val = $(this).prop('checked'),
            allowOverlap = val === 'on';
        console.log(val);
        chart.update({
            plotOptions: {
                bar: {
                    dataLabels: {
                        allowOverlap: val
                    }
                }
            }
        });
    });
});

<div id="container" style="min-width:400px;height:400px"></div>
<label for="">允许数据标签重叠 <input type="checkbox"></label>
<p>
    （注：图中 非洲 1800 年、大洋洲 1900 年的数据标签因为没有足够空或会产生重叠的原因，所以在默认情况下不显示）
</p>

{"doctype":0,"resouces":"1,3,7,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":0}}","meta":""}

数据标签重叠处理演示 | JShare

模板（查看所有模板）