Как всегда показывать plotLine в HighCharts?

Я создаю HighChart с графикой в нем. Значение plotLine имеет фиксированное значение, а данные могут меняться между графиками.

HighChart автоматически масштабирует ось y на основе максимального значения данных, но не учитывает значение plotLine в своих вычислениях.

Следовательно, если диапазон данных охватывает значение plotLine, отображается графикLineLine, но если он не отображается, он будет выведен из окна просмотра.

Пример:

$(function () {
    $(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Dummy Data by Region'
            },
            xAxis: {
                categories: ['Africa', 'America', 'Asia']
            },
            yAxis: {
                plotLines:[{
                    value:450,
                    color: '#ff0000',
                    width:2,
                    zIndex:4,
                    label:{text:'goal'}
                }]
            },
            series: [{
                name: 'Year 1800',
                data: [107, 31, 650]
            }]
        });
    });

});

JSFiddle для кода выше: http://jsfiddle.net/4R5HH/3/

Строка цели (красным цветом) показана для данных по умолчанию, но если я изменил данные на [107, 31, 250], то графикLine выходит из окна просмотра графика и, следовательно, становится невидимым.

Ответ 1

Вам нужно добавить в диаграмму точку, но отключите маркер. Я добавил новую серию с типом разброса и ее значение, равное значению цели:

{
     name: 'Goal',
     type: 'scatter',
     marker: {
          enabled: false
     },
     data: [450]
}

См. обновленный файл jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/

Ответ 2

Еще один параметр, который не вводит точки данных:

        yAxis: {
            minRange:450,
            min:0,
            plotLines:[{
                value:450,
                color: '#ff0000',
                width:2,
                zIndex:4,
                label:{text:'goal'}
            }]
        },

Это устанавливает минимум для yAxis равным 0 (это вряд ли будет ложным в этом случае) и минимальным диапазоном до 450.

Смотрите обновленную скрипту.