Как всегда показывать 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.
Смотрите обновленную скрипту.