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

20

Я создаю 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
источник

3 ответа

18

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

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

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

    
ответ дан wergeld 26.10.2012 в 15:12
источник
  • спасибо, это отлично работает! –  HRJ 26.10.2012 в 15:17
  • Печально, что нам нужны хаки для таких вещей, когда я впервые наткнулся на это, я сильно подумал, и я все еще считаю его ошибкой в ​​части Highcharts. Надежда @ Торстейн читает :) –  Jugal Thakkar 26.10.2012 в 17:03
  • Я согласен несколько, @JugalThakkar. Аргумент может быть сделан двумя способами относительно того, должна ли отображаться полоса / линия графика всегда. Возможно, сделать необязательное свойство в сюжетной полосе / настройке линии для «диаграммы шкалы, чтобы всегда показывать», может ли это сделать? Конечно, этот вариант не должен превышать масштабирование. –  wergeld 26.10.2012 в 17:34
  • @wergeld полностью согласился с тем, что это больше вариант, хороший момент и для масштабирования. –  Jugal Thakkar 26.10.2012 в 19:36
  • Вы также можете добавить ось <x / y>. <max / min> по мере необходимости, а не пустую точку данных. Я согласен, что опция alwaysShow будет удобна. –  AlexMA 28.06.2013 в 18:28
Показать остальные комментарии
26

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

        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
источник
  • Можно ли показать точку оси y для линии графика? Трудно сказать значение линии ворот? Благодаря! –  unj2 11.06.2015 в 17:14
  • label: {текст: '450'} заменяет «цель» на значение. –  jank 12.11.2015 в 04:03
1

В некоторых случаях решение Wergeld было бы предпочтительнее, чем решение jank, особенно если вы не уверены в min и minRange . Но решение Wergeld имеет второстепенную проблему. Если вы наведите указатель мыши на линию сюжета, на экране появится точка и всплывающая подсказка. Чтобы этого избежать, я изменил его решение и добавил enableMouseTracking , чтобы избавиться от проблемы.

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

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

    
ответ дан Debiprasad 09.02.2018 в 12:38
источник