Как создать легенду для Plotlines с Highstock Highcharts?

Question

У меня есть график Highstock с сюжетными здесь: http://jsfiddle.net/qd0rmazg/3/

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

В моем примере JSfiddle есть 2 категории Plotlines. Можно ли переключать видимость Plotlines на одну категорию? Кажется, я ничего не мог найти в этом.

Это, как я создал сюжетные:

xAxis: { 
    plotLines: [{ 
     value: Date.UTC(2016, 12, 29), // year, month, day 
     width: 1, 
     color: 'blue', 
     dashStyle: 'ShortDash', 
     label: { 
      text: 'Category 1', 
     }, 
    }, { 
     value: Date.UTC(2016, 11, 12), // year, month, day 
     width: 1, 
     color: 'green', 
     dashStyle: 'Solid', 
     label: { 
      text: 'Category 2', 
     }] 
} 

Answer 1

Насколько я знаю, нет родной HC легенды для сюжетных линий. Но вы можете создать свой собственный элемент легенды на странице и использовать возможности HC, чтобы показать/скрыть сюжетные линии, как в своих примерах:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/

chart.xAxis[0].removePlotLine('plot-line-1'); 

chart.xAxis[0].addPlotLine({ 
     .... 
     id: 'plot-line-1' 
    }); 

Answer 2

Как было отмечено в моем комментарии, есть запрос функция здесь:

• https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend

Пожалуйста, добавьте свои голоса и комментарии.

Vladimir M предоставил хорошее решение, чтобы показать/скрыть линии сюжета с вашей собственной легендой.

Другим распространенным подходом является использование линейки в качестве вашего plotLine, что дает вам преимущество от полной функциональности серии.

Пример серии:

{ 
    name: 'PlotLine', 
    type: 'line', 
    color: 'rgba(204,0,0,1)', 
    data: [25,25,25,25,25,25,25,25,25,25] 
} 

Fiddle:

• http://jsfiddle.net/jlbriggs/nh65m306/

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

{{EDIT для демонстрации вертикального участка линии:

Во-первых, вы; d должны установить мин/макс для вас оси у (может быть сделано программно на графике нагрузки):

yAxis: { 
    min: 0, 
    max: 75, 
    maxPadding: 0 
} 

Затем необходимо указать свои данные в [x,y] паре, с x значениями являются вашим plotLine значения, и y значений являются вашей Y оси мин и макс:

data: [[4,0], [4,75]] 

ОБНОВЛЕНО скрипка:

• http://jsfiddle.net/jlbriggs/nh65m306/1/

С этим методом, вы можете добавить ряд за сюжетную линию, или, если вы хотите, чтобы все из них, чтобы быть такой же легенда и настройки, можно добавить несколько вставив null точек между вашими желаемыми линиями:

data: [[4,0], [4,75], [5,null], [7,0],[7,75]] 

Fiddle:

• http://jsfiddle.net/jlbriggs/nh65m306/2/