Рисование вертикальных линий и горизонтальных полос

Question

Прокладывайте массив непосредственно в серию моей высокой диаграммы. Мне нужно показать вертикальные линии по оси х и горизонтальные полосы по оси y в виде разных цветов.

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

Вот мой код:

$('#container').highcharts({ 
    title: { 
     text: 'Graph', 
     x: -20 //center 
    }, 
    subtitle: { 
     text: '', 
     x: -20 
    }, 
    credits: { 
     enabled: false 
    }, 

    colors: ['red'], 

    xAxis: { 
     // categories: [], 
     title: { 
      text: 'Time' 
     }, 
    }, 
    yAxis: { 
     title: { 
      text: 'Rate' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     valueSuffix: '' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    series: [{ 
     name: 'Heart Rate', 
     data: data_arr 
    }] 
}); 

Answer 1

Чтобы установить вертикальные/горизонтальные линии/полосы используют plotBands или/и сюжетные варианты:

Для линий:

plotLines: [{ 
     color: '#FF0000', 
     width: 2, 
     value: 5.5 
    }] 

Для оркестра

plotBands: [{ // mark the weekend 
     color: '#FCFFC5', 
     from: Date.UTC(2010, 0, 2), 
     to: Date.UTC(2010, 0, 4) 
    }], 

Вы можете прочитать здесь:

http://api.highcharts.com/highcharts#xAxis.plotBands http://api.highcharts.com/highcharts#xAxis.plotLines

Проверьте следующий пример jsfiddle

$(function() { 
    $('#container').highcharts({ 
    title: { 
     text: 'Graph', 
     x: -20 //center 
    }, 
    subtitle: { 
     text: '', 
     x: -20 
    }, 
    credits: { 
     enabled: false 
    }, 

    colors: ['red'], 

    xAxis: { 
     // categories: [], 
     title: { 
     text: 'Time' 
     }, 
     plotLines: [{ 
     color: 'blue', 
     width: 1, 
     value: 1, 
     dashStyle: 'longdashdot', 
     zIndex: 3 
     }, { 
     color: 'blue', 
     width: 1, 
     value: 2, 
     dashStyle: 'longdashdot', 
     zIndex: 3 
     }, { 
     color: 'blue', 
     width: 1, 
     value: 3, 
     dashStyle: 'longdashdot', 
     zIndex: 3 
     }], 

     zIndex: 3, 
    }, 
    yAxis: { 
     title: { 
     text: 'Rate' 
     }, 
     plotBands: [{ // mark the weekend 
     color: '#BEE9B4', 
     from: 1, 
     to: 4 
     }, { // mark the weekend 
     color: '#EB813B', 
     from: 4, 
     to: 6 
     }, { // mark the weekend 
     color: '#E93A0F', 
     from: 6, 
     to: 8 
     }], 
     zIndex: 2, 
    }, 
    tooltip: { 
     valueSuffix: '' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    plotOptions: { 
     series: { 
     marker: { 
      enabled: false 
     } 
     } 
    }, 
    series: [{ 
     type: 'spline', 
     name: 'Heart Rate', 
     data: [4, 5, 1, 2, 8, 7, 4, 1] 
    }] 
    }); 
}); 

Answer 2

Для этого, вы можете использовать chart.xAxis[0].categories.length для доступа к длине XAxis, и chart.xAxis[0].categories[] для доступа к значениям элементов xAxis. Проверьте следующее example:

$(function() { 
    $('#container').highcharts({ 

    xAxis: { 
     categories: [10, 20, 30, 40, 50, 60, 70] 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6] 
    }] 
    }); 


    // the button action 
    var hasPlotLine = false, 
    $button = $('#button'), 
    chart = $('#container').highcharts(); 

    $button.click(function() { 
    for (i = 1; i < chart.xAxis[0].categories.length; i++) { 
     if (chart.xAxis[0].categories[i] > 30) { 
     chart.xAxis[0].addPlotLine({ 
      value: i, 
      color: 'red', 
      width: 2, 
      id: 'plot-line-1' 
     }); 
     } 
    } 
    }); 
});