Создание вертикальных линий для интервала с использованием highstocks

Question

Я хотел бы знать, возможно ли как-то создать вертикальные линии (plotLines) в xAxis для определенного интервала.

Here's an example одной из этих сюжетных линий для данной даты. Можно ли определить его для данного интервала?

xAxis: { 
      tickInterval: 5 * 4 * 1000, 
     lineColor: '#FF0000', 
     lineWidth: 1, 
     plotLines: [{ 
      value: Date.UTC(2014,03,05), 
      width: 1, 
      color: 'green', 
      dashStyle: 'dash', 
     }] 
    }, 

Answer 1

В целом, в Highcharts нет такой вещи, как диапазон для plotLines. Однако вы cna создаете простую функцию для этого: http://jsfiddle.net/kZkWZ/57/

function generatePlotLines(from, to, interval) { 
    var plotLines = []; 

    while (from < to) { 
     from += interval; 
     plotLines.push({ 
      value: from, 
      width: 1, 
      color: 'green', 
      dashStyle: 'dash', 
      label: { 
       text: 'some name', 
       align: 'right', 
       y: 122, 
       x: 0 
      } 
     }) 
    } 

    return plotLines; 
} 


$('#container').highcharts('StockChart', { 

    xAxis: { 
     plotLines: generatePlotLines(Date.UTC(2011, 0, 1), Date.UTC(2011, 3, 1), 7 * 24 * 3600 * 1000) 
    }, 

    rangeSelector: { 
     selected: 1 
    }, 

    series: [{ 
     name: 'USD to EUR', 
     data: usdeur 
    }] 
}); 

Answer 2

Что вы ищете, это plotBand. Это позволяет использовать диапазон. Общее использование, как:

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

EDIT - на основе разъяснений вы можете создать серию так:

chart: { 
    events: { 
     load: function() { 
      // set up the updating of the chart each second 
      var series = this.series[1]; 
      var Xmin = this.xAxis[0].min; 
      var Xmax = this.xAxis[0].max; 
      //console.log(Xmin); 
      //console.log(Xmax); 
      series.pointInterval = 24 * 3600 * 1000; 
      series.pointStart = Date.UTC(2011, 0, 01, 0, 0, 0, 0); 
      for (var i = Xmin; i < Xmax; i = i + (24 * 3600 * 1000)) { 
       var x = i, 
        y = 1; 
       series.addPoint([x, y], true); 
      } 

     } 
    } 
}, 

Вам нужно сделать, что новые серии до (но без данных):

series: [{ 
    name: 'USD to EUR', 
    data: usdeur 
}, { 
    name: 'Interval', 
    type: 'column', 
    data: [] 
} 

Демо-версия here. Делать это каждую секунду на той диаграмме, которую вы используете, собирается размалывать. Моя делает это каждый день. Делать это каждую минуту занимает много времени. Обратите внимание, что я добавляю его только к отображаемому min/max при загрузке. Если вы хотите, чтобы он охватывал весь график, вам нужно будет определить свои собственные Xmin и Xmax.