Question

我有多针的Highcharts Gauge图表，并且针的数据标签彼此重叠，如http://jsfiddle.net/edLHB/3/ plotOptions我用过如下

plotOptions: {
        guage: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none'
            }
        }
    },

请帮助我获取数据标签而不重叠。

由于

Answer 1

在x

中为他们提供个人y或series个值

series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                y:50
                }
        }, {
            name: 'Speed',
            data: [100],
            dataLabels: {
                y:30
                }
        }, {
            name: 'Speed',
            data: [150],
            dataLabels: {
                y:10
                }
        }]

演示：http://jsfiddle.net/robschmuecker/edLHB/7/

Answer 2

通常不支持此解决方案（我的意思是碰撞检测），但您可以调整此解决方案http://jsfiddle.net/menXU/6/。

function StaggerDataLabels(series) {
    sc = series.length;
    if (sc < 2) return;

    for (s = 1; s < sc; s++) {
        var s1 = series[s - 1].points,
            s2 = series[s].points,
            l = s1.length,
            diff, h;

        for (i = 0; i < l; i++) {
            if (s1[i].dataLabel && s2[i].dataLabel) {
                diff = s1[i].dataLabel.y - s2[i].dataLabel.y;
                h = s1[i].dataLabel.height + 2;

                if (isLabelOnLabel(s1[i].dataLabel, s2[i].dataLabel)) {
                    if (diff < 0) s1[i].dataLabel.translate(s1[i].dataLabel.translateX, s1[i].dataLabel.translateY - (h + diff));
                    else s2[i].dataLabel.translate(s2[i].dataLabel.translateX, s2[i].dataLabel.translateY - (h - diff));
                }
            }
        }
    }
}

highcharts gauge multheedles数据标签重叠

2 个答案: