Highcharts - Столбец/гистограмма с целевыми линиями

Question

Использование highcharts, что было бы лучшим способом реализовать целевые линии над столбцом или гистограммой? (Также известный как цель против цели)

Найдено эту картину с аналогичной d3.js нити в качестве примера:

Я имею в виду еще одну серию, но не вижу никаких вариантов в документации о целевой линии. Вот базовая диаграмма столбца: jsfiddle.net/eksh8a8p/

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

Есть ли другие идеи/варианты, которые могли бы создать аналогичный результат для изображения выше?

Answer 1

Вы можете использовать серию columnrange, но есть более простой вариант - серия Разброс с прямоугольником маркером

//custom marker 
    Highcharts.SVGRenderer.prototype.symbols['c-rect'] = function (x, y, w, h) { 
     return ['M', x, y + h/2, 'L', x + w, y + h/2]; 
    }; 

    //series options 
    { 
     marker: { 
     symbol: 'c-rect', 
     lineWidth:3, 
     lineColor: Highcharts.getOptions().colors[1], 
     radius: 10 
     }, 
     type: 'scatter' 

пример: http://jsfiddle.net/eksh8a8p/1/