highcharts - highcharts 仪表多针数据标签重叠

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));
                }
            }
        }
    }
}