Можно ли показывать метки xrange старшего чарта, только если они подходят к коробке? - PullRequest
Новая
       45

Можно ли показывать метки xrange старшего чарта, только если они подходят к коробке?

0 голосов
/ 26 сентября 2018

Я хотел бы создать диаграмму xrange Highcharts, в которой отображаются только метки данных, которые вписываются в поля / диапазоны.Возможно ли это?

В настоящее время метки не перекрываются, а отображаются вне рамки, когда они не помещаются.

Я попытался поиграть с параметрами xrange.dataLabels, такими как 'allowOverlap'',' clip, 'inside' или 'padding', но, похоже, они не созданы для этого / работы.

Пример показан здесь: http://jsfiddle.net/mdomnita/dfLw7j1c/1/

Highcharts.chart('container', {
chart: {
    type: 'xrange'
},
title: {
    text: 'Highcharts X-range'
},
xAxis: {
    type: 'datetime'
},
yAxis: {
    title: {
        text: ''
    },
    categories: ['Idea','Prototyping'],
    reversed: true
},
series: [{
    name: 'Project 1',
    data: [{
        x: Date.UTC(2014, 10, 21),
        x2: Date.UTC(2014, 11, 2),
        y: 0
    }, {
        x: Date.UTC(2014, 11, 10),
        x2: Date.UTC(2014, 11, 11),
        y: 1
    }, {
        x: Date.UTC(2014, 11, 11),
        x2: Date.UTC(2014, 11, 12),
        y: 1
    }],
    dataLabels: {
        enabled: true,
        formatter: function () {
          return 'This is a label that should only be shown if it fits the box'
        },
    }
}]
});

Спасибо,

1 Ответ

0 голосов
/ 26 сентября 2018

Вы можете легко реализовать требуемое поведение, например, в событии render, следующим образом: 

    events: {
        render: function() {
            var points = this.series[0].points;

            Highcharts.each(points, function(point) {
                var label = point.dataLabel;

                if (point.shapeArgs.width < label.width) {
                    if (label.visibility !== 'hidden') {
                        label.hide();
                    }
                } else {
                    if (label.visibility === 'hidden') {
                        label.show();
                    }
                }
            });
        }
    }

Демонстрационная версия: http://jsfiddle.net/BlackLabel/k4swecd6/

...