Блог

Я пытаюсь создать зоны на моем графике, которые меняют цвет, когда значение превышает определенный порог.

Вот мой график:

В ресурсах Highchart есть пример того, как это сделать:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/

Однако моя проблема заключается в том, что я нигде не могу найти пример того, как это сделать, когда ваш Highchart импортирует данные из текстового файла.

Я довольно сильно стилизовал свою диаграмму, так что это мой фрагмент кода верхней диаграммы:

 $(function () {

    // Load the fonts
Highcharts.createElement('link', {
   href: 'http://fonts.googleapis.com/css?family=Signika:400,700',
   rel: 'stylesheet',
   type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);

// Add the background image to the container
Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
   proceed.call(this);
   this.container.style.background =null;
});


Highcharts.theme = {
    colors: ['#5B8256'],
    chart: {
    backgroundColor: null,
    style: {
    fontFamily: "Arial, Helvetica, sans-serif"},
    plotBorderColor: '#606063'},
    title: {
    style: {
    color: '#eeeeee',
    fontSize: '16px',
    fontWeight: ''}},
    subtitle: {
    style: {
    color: '#eeeeee'}},
    tooltip: {
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
    style: {color: '#F0F0F0'},
    borderWidth: 0},
    legend: {
    itemStyle: {
    fontWeight: 'bold',
    fontSize: '13px'}},
    xAxis: {
    labels: {
    style: {
    color: '#eeeeee'}}},
    yAxis: {
    labels: {
    style: {
    color: '#eeeeee'}}},
    plotOptions: {
    series: {shadow: true},
    marker: {lineColor: '#333'},
    candlestick: {lineColor: '#404048'},
    map: {shadow: false}},

    navigator: {
    xAxis: {gridLineColor: '#D0D0D8'}},
    rangeSelector: {
    buttonTheme: {fill: '#eeeeee',stroke: '#C0C0C8','stroke-width': 1,
    states: {
    select: {fill: '#D0D0D8'}}}},
    scrollbar: {trackBorderColor: '#eeeeee'},
    background2: null};

Highcharts.setOptions(Highcharts.theme);
var options = {
    chart: {
    zoomType: 'x',
    renderTo: 'container',
    defaultSeriesType: 'column',
    resetZoomButton: {
    theme: {display: 'none'}}},
    title: {
    text: 'Max Pressure Today:',
    style: {
    fontSize: '14px',opacity: 0,
    style: {color: '#'}}},
    xAxis: {type: 'datetime'},
    yAxis: [{ // Primary yAxis
    labels: {format: '{value}',
    style: {color: '#eeeeee'}},
    title: {
    text: '',
    style: {color: '#1E1E1E'}},
    opposite: false},],
    legend: {enabled: false},
    tooltip: {shared: true,valueSuffix: ' psi'},
    plotOptions: {
    column: {pointPadding: 0.2,borderWidth: 0},
    series: {name: 'Pressure',pointStart: Date.UTC(2016, 10, 7),pointInterval: 12 * 3600 * 1000}},
    series: []};
    
    
    $.get('demo-data.txt', function(data) {
    var lines = data.split('n');
    lines = lines.map(function(line) {var data = line.split(',');
    data[1] = parseFloat(data[1]);return data;});
    var series = {data: lines};
    options.series.push(series);
    var chart = new Highcharts.Chart(options);});});
 

Буду признателен за любую помощь, указывающую мне правильное направление.

Вы можете добавлять зоны с помощью параметров построения, например:

     plotOptions: {
        series: {
            zones: [{
                value: 20,
                color: '#7cb5ec'
            }, {
                color: '#90ed7d'
            }],
            ...
        }
    }
 

Живая демонстрация: https://jsfiddle.net/blackLabel/5w9rvonz/

Ссылка на API: https://api.highcharts.com/highcharts/plotOptions.series.zones