首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >高亮图表、条形图、数据标签重叠

高亮图表、条形图、数据标签重叠
EN

Stack Overflow用户
提问于 2014-12-13 01:35:28
回答 1查看 1.1K关注 0票数 0

我使用的是highcharts条形图,chart.The系列是动态加载的,所以有时只能有一个值,有时会有10个值。我不能给出一组宽度。我遇到了一个问题,当有很多值时,条形图顶部的数据标签会彼此重叠。在互联网上搜索后,我能找到的最接近这个问题的东西是stackflow,它是两个或更多系列的。

Overlap datalabels line chart highcharts

有没有什么方法可以检测单个序列的重叠,并调整数据标签,使其不相互重叠。感谢你的任何帮助

EN

回答 1

Stack Overflow用户

发布于 2014-12-15 20:21:28

通常不支持此解决方案,但您可以采用此解决方法

代码语言:javascript
复制
    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));
                }
            }
        }
    }
}

//compares two datalabels and returns true if they overlap


function isLabelOnLabel(a, b) {
    var al = a.x - (a.width / 2);
    var ar = a.x + (a.width / 2);
    var bl = b.x - (b.width / 2);
    var br = b.x + (b.width / 2);

    var at = a.y;
    var ab = a.y + a.height;
    var bt = b.y;
    var bb = b.y + b.height;

    if (bl > ar || br < al) {
        return false;
    } //overlap not possible
    if (bt > ab || bb < at) {
        return false;
    } //overlap not possible
    if (bl > al && bl < ar) {
        return true;
    }
    if (br > al && br < ar) {
        return true;
    }

    if (bt > at && bt < ab) {
        return true;
    }
    if (bb > at && bb < ab) {
        return true;
    }

    return false;
}

http://jsfiddle.net/menXU/6/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27449067

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档