свойство allowOverlap для Highcharts JS v3.0.10 - PullRequest
2 голосов
/ 27 мая 2019

В моем проекте мы используем версию старшей диаграммы: Highcharts JS v3.0.10.

Каким должен быть эквивалентный код или свойство, которое подходит для allowOverlap = false в соответствии с более новой версией?

Как добиться alloOverlap= false в старой версии?

Ссылка: https://api.highcharts.com/highcharts/series.timeline.dataLabels.allowOverlap

1 Ответ

2 голосов
/ 27 мая 2019

Код, который отвечает за сокрытие перекрывающихся меток данных, в настоящее время находится в ядре Highcharts: https://code.highcharts.com/highcharts.src.js,, но ранее это был отдельный модуль: https://code.highcharts.com/5/modules/overlapping-datalabels.src.js

Однако, чтобы заставить его работать, вам нужно будет внести много изменений в ваш код. Я думаю, что использование плагина ниже будет лучшим решением для вас:

(function(H) {

    var each = H.each,
        extend = H.extend;

    /**
     * Hide overlapping labels. Labels are moved and faded in and out on zoom to provide a smooth 
     * visual imression.
     */
    H.Series.prototype.hideOverlappingDataLabels = function() {

        var points = this.points,
            len = points.length,
            i,
            j,
            label1,
            label2,
            intersectRect = function(pos1, pos2, size1, size2) {
                return !(
                    pos2.x > pos1.x + size1.width ||
                    pos2.x + size2.width < pos1.x ||
                    pos2.y > pos1.y + size1.height ||
                    pos2.y + size2.height < pos1.y
                );
            };

        // Mark with initial opacity
        each(points, function(point, label) {
            label = point.dataLabel;
            if (label) {
                label.oldOpacity = label.opacity;
                label.newOpacity = 1;
            }
        });

        // Detect overlapping labels
        for (i = 0; i < len - 1; ++i) {
            label1 = points[i].dataLabel;

            for (j = i + 1; j < len; ++j) {
                label2 = points[j].dataLabel;
                if (label1 && label2 && label1.newOpacity !== 0 && label2.newOpacity !== 0 &&
                    intersectRect(label1.alignAttr, label2.alignAttr, label1, label2)) {
                    (points[i].labelrank < points[j].labelrank ? label1 : label2).newOpacity = 0;
                }
            }
        }

        // Hide or show
        each(points, function(point, label) {
            label = point.dataLabel;
            if (label) {
                if (label.oldOpacity !== label.newOpacity) {
                    label[label.isOld ? 'animate' : 'attr'](extend({
                        opacity: label.newOpacity
                    }, label.alignAttr));
                }
                label.isOld = true;
            }
        });
    };

    H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
        proceed.call(this);
        this.hideOverlappingDataLabels();
    });
}(Highcharts));

Демо: http://jsfiddle.net/BlackLabel/6s5ycrwa/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...