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

17

Я создаю 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 для кода выше: Ссылка

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

    
задан HRJ 26.10.2012 в 12:06
источник

2 ответа

14

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

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

См. обновленный jsFiddle: Ссылка

    
ответ дан wergeld 26.10.2012 в 15:12
источник
25

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

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

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

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

    
ответ дан jank 31.08.2013 в 01:03
источник