Можно ли позиционировать DataLabels Highcharts в зависимости от значения?

Я использую Highcharts для отображения гистограммы с 2 барами, накладывающимися друг на друга, и dataLabels справа от них, отображающими точное значение.

Проблема заключается в том, что, когда значение превышает 80%, метка переполняется из диаграммы в кадр, перебирает какой-то другой текст и делает их нечитаемыми.

Вот мой plotOptions:

plotOptions: {
            bar: {
                groupPadding: 0.5,
                pointWidth : 30,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    y:-5,
                    color:"black",
                    style: {
                        fontSize: "12px"
                    },
                    formatter: function(){
                        if(this.y > 80)
                        {
                            this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;
                        }
                        if(this.series.name == "Tests OK")
                            return "Tests OK : <strong>"+Math.round(this.y*10)/10+"%</strong>";
                        else
                            return "<br/>Tests Executed : <strong>"+Math.round(this.y*10)/10+"%</strong>";
                    }
                }
            }
        }

Я думал, что могу редактировать параметры диаграммы на ходу, используя this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;, но это не работает.

Конечно, я не первый, кто столкнулся с такой проблемой. Любая идея?

Спасибо

Ответ 1

Похоже, это невозможно сделать из formatter.

Но вы можете установить их после отображения графика (загруженного). Попробуйте что-то вроде этого

$.each(chartObj.series[0].data, function(i, point) {
    if(point.y > 100) {
        point.dataLabel.attr({x:20});
    }
});

в load callback (или если вам это нужно в redraw callback).

См. пример здесь.

Ответ 2

Вот что у меня получилось. SetTimeout необходимо или свойство dataLabel не существует в этой точке:

formatter: function () {
    var point = this.point;
    window.setTimeout(function () {
        if (point.s < 0) {
            point.dataLabel.attr({
                y: point.plotY + 20
            });
        }
    });
    //this.series.options.dataLabels.y = -6;
    var sty = this.point.s < 0 ? 'color:#d00' : 'color:#090;' //other style has no effect:(
    return '<span style="' + sty + '">' + Math.abs(this.point.s) + '</span>';
}

Ответ 3

Хотя ответ Bhesh решает проблему для позиционирования x/y, Highcharts игнорирует любые изменения свойства стиля dataLabels (см. проблему здесь), Однако вы можете переопределить стили отдельной точки, передав ее через объект данных:

series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }]

пример из документов Highcharts

Мне удалось получить динамические стили, итерации по моим данным, прежде чем передать весь объект в Highcharts для рендеринга.

Ответ 4

Я пытаюсь сам понять это... похоже, вместо

this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;

Вы могли бы использовать...

this.series.options.dataLabels.x = -20;

... в этот момент я пытаюсь понять, могу ли я определить местоположение DataLabel, чтобы при необходимости изменить его положение.