Highcharts добавить одну строку в столбчатую диаграмму

Question

Я работаю с Highcharts и имею базовую диаграмму столбцов двойной серии. Я хочу добавить на диаграмму одну строку, управляемую данными, как показано в красном поле на изображении ниже, но я не уверен в лучшем подходе (это будет продолжаться в текущем месяце, чтобы отметить прогнозируемое значение конца месяца) ,

• Ширин диаграммы является переменной величиной, так что линия должна быть «реагируют»
• линия должна перекрывать только одну из двух серий для целевого периода
ширин
• линии должен быть немного шире, чем у колонны сам

Я рассмотрел три способа сделать это, но я не уверен, что лучший маршрут:

1. Highcharts Renderer: Я считаю, что я могу использовать средство визуализации и получить доступ к значениям данных и отображать позиции довольно легко, а рисование фигуры не будет большим делом. Тем не менее, я не верю, что у меня будет «неподходящее» поведение, например, строка будет изначально нарисована, но если пользователь расширит экран, линия останется на месте, пока увеличивается ширина всей диаграммы (смотря на вывод для рендерера, я не вижу ни одного элемента, который я могу связать с событием изменения размера, и даже в этом случае математика была бы не идеальна в этой точке).
2. Абсолютное наложение и перестановка HTML с событием изменения размера окна. Недостатком здесь является получение требуемых значений/позиций данных, преобразованных и поддерживающих эти отношения во время события изменения размера.
3. Третья серия с одним значением. Проблема, которую я предвижу здесь, - это форматирование серии, чтобы она сидела поверх целевого столбца (я не знаю серию типов «одна строка», которую я могу использовать для этого). Я склонен думать, что это было бы идеально, как если бы я мог правильно настроить форматирование, ответственность за его выполнение возлагалась бы на высокие диаграммы, так что это больше «в контексте» с остальной частью графика. К сожалению, я не уверен, что у меня есть тип серии и параметры форматирования, достаточные для создания необходимого отображения. Кроме того, вместо «одиночной строки» типа типа рендеринга я предположил, что, возможно, взломал столбцы с столбцом, при этом нижний столбец был прозрачным, но другие проблемы форматирования (такие как позиционирование над верхней колонкой существующей серии) все еще остаются.

Неужели кто-то должен был сделать что-то подобное раньше и мог бы рассказать о том, как это было сделано? Благодарю.

Answer 1

Рисование пользовательской линии - самое чистое решение, которое я предполагаю - вы можете легко отрегулировать эту линию, подключившись к событию перерисовывания и сделав повторное позиционирование/изменение размера.

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

Highcharts.SVGRenderer.prototype.symbols.line = function(x, y, w, h) { 
    return ['M', x, y, 'L', x + w, y]; 
}; 

{ 
    type: 'scatter', 
    showInLegend: false, 
    enableMouseTracking: false, 
    marker: { 
    symbol: 'line', 
    lineColor: 'orange', 
    lineWidth: 6, 
    radius: 20 
    }, 
    data: [ 
    [1.15, 140] 
    ] 
}] 

пример: http://jsfiddle.net/g6fjjach/