Highcharts - zmień kolor tła w określonym przedziale czasu

Question

Biorąc pod uwagę prosty wykres daty i czasu (x) w porównaniu do wykresu wartości (y) w highcharts, czy jest możliwe zmienić kolor tła, biorąc pod uwagę 2 daty jako zakresy? Innymi słowy, każdy podany zakres będzie oznaczał "prostokąt" o określonym kolorze.

jsfiddle:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/

Kod:

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'spline' 
     }, 
     title: { 
      text: 'Snow depth in the Vikjafjellet mountain, Norway' 
     }, 
     subtitle: { 
      text: 'An example of irregular time data in Highcharts JS' 
     }, 
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { // don't display the dummy year 
       month: '%e. %b', 
       year: '%b' 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Snow depth (m)' 
      }, 
      min: 0 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m'; 
      } 
     }, 

     series: [{ 
      name: 'Winter 2007-2008', 
      // Define the data points. All series have a dummy year 
      // of 1970/71 in order to be compared on the same x axis. Note 
      // that in JavaScript, months start at 0 for January, 1 for February etc. 
      data: [ 
       [Date.UTC(1970, 9, 27), 0 ], 
       [Date.UTC(1970, 10, 10), 0.6 ], 
       [Date.UTC(1970, 10, 18), 0.7 ], 
       [Date.UTC(1970, 11, 2), 0.8 ], 
       [Date.UTC(1970, 11, 9), 0.6 ], 
       [Date.UTC(1970, 11, 16), 0.6 ], 
       [Date.UTC(1970, 11, 28), 0.67], 
       [Date.UTC(1971, 0, 1), 0.81], 
       [Date.UTC(1971, 0, 8), 0.78], 
       [Date.UTC(1971, 0, 12), 0.98], 
       [Date.UTC(1971, 0, 27), 1.84], 
       [Date.UTC(1971, 1, 10), 1.80], 
       [Date.UTC(1971, 1, 18), 1.80], 
       [Date.UTC(1971, 1, 24), 1.92], 
       [Date.UTC(1971, 2, 4), 2.49], 
       [Date.UTC(1971, 2, 11), 2.79], 
       [Date.UTC(1971, 2, 15), 2.73], 
       [Date.UTC(1971, 2, 25), 2.61], 
       [Date.UTC(1971, 3, 2), 2.76], 
       [Date.UTC(1971, 3, 6), 2.82], 
       [Date.UTC(1971, 3, 13), 2.8 ], 
       [Date.UTC(1971, 4, 3), 2.1 ], 
       [Date.UTC(1971, 4, 26), 1.1 ], 
       [Date.UTC(1971, 5, 9), 0.25], 
       [Date.UTC(1971, 5, 12), 0 ] 
      ] 
     }, { 
      name: 'Winter 2008-2009', 
      color:'red', 
      data: [ 
       [Date.UTC(1970, 9, 18), 0 ], 
       [Date.UTC(1970, 9, 26), 0.2 ], 
       [Date.UTC(1970, 11, 1), 0.47], 
       [Date.UTC(1970, 11, 11), 0.55], 
       [Date.UTC(1970, 11, 25), 1.38], 
       [Date.UTC(1971, 0, 8), 1.38], 
       [Date.UTC(1971, 0, 15), 1.38], 
       [Date.UTC(1971, 1, 1), 1.38], 
       [Date.UTC(1971, 1, 8), 1.48], 
       [Date.UTC(1971, 1, 21), 1.5 ], 
       [Date.UTC(1971, 2, 12), 1.89], 
       [Date.UTC(1971, 2, 25), 2.0 ], 
       [Date.UTC(1971, 3, 4), 1.94], 
       [Date.UTC(1971, 3, 9), 1.91], 
       [Date.UTC(1971, 3, 13), 1.75], 
       [Date.UTC(1971, 3, 19), 1.6 ], 
       [Date.UTC(1971, 4, 25), 0.6 ], 
       [Date.UTC(1971, 4, 31), 0.35], 
       [Date.UTC(1971, 5, 7), 0 ] 
      ] 
     }, { 
      name: 'Winter 2009-2010', 
      data: [ 
       [Date.UTC(1970, 9, 9), 0 ], 
       [Date.UTC(1970, 9, 14), 0.15], 
       [Date.UTC(1970, 10, 28), 0.35], 
       [Date.UTC(1970, 11, 12), 0.46], 
       [Date.UTC(1971, 0, 1), 0.59], 
       [Date.UTC(1971, 0, 24), 0.58], 
       [Date.UTC(1971, 1, 1), 0.62], 
       [Date.UTC(1971, 1, 7), 0.65], 
       [Date.UTC(1971, 1, 23), 0.77], 
       [Date.UTC(1971, 2, 8), 0.77], 
       [Date.UTC(1971, 2, 14), 0.79], 
       [Date.UTC(1971, 2, 24), 0.86], 
       [Date.UTC(1971, 3, 4), 0.8 ], 
       [Date.UTC(1971, 3, 18), 0.94], 
       [Date.UTC(1971, 3, 24), 0.9 ], 
       [Date.UTC(1971, 4, 16), 0.39], 
       [Date.UTC(1971, 4, 21), 0 ] 
      ] 
     }] 
    }); 
}); 

dzięki za wszelką pomoc!

Answer 1

Zastosowanie plotBands

Przykład:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/plotbands-color/

$(function() { 
$('#container').highcharts({ 
    chart: { 
    }, 
    xAxis: {   
     plotBands: [{ // mark the weekend 
      color: '#FCFFC5', 
      from: Date.UTC(2010, 0, 2), 
      to: Date.UTC(2010, 0, 4) 
     }], 
     tickInterval: 24 * 3600 * 1000, // one day 
     type: 'datetime' 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 24 * 3600 * 1000 
    }] 
}); 
}); 

Answer 2

plotBands to, czego potrzebujesz do osiągnięcia tego celu:

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

na przykładzie ty Wysłany:

http://jsfiddle.net/jlbriggs/tv5cN/

plotBands:[{ 
    from:Date.UTC(1971, 0, 8), 
    to:Date.UTC(1971, 2, 15), 
    color:'rgba(156,156,156,.25)' 
}] 

Answer 3

tak można iść z zespołami fabuły

xAxis: { 
    plotBands: { 
    from: fromDate, 
    to: toDate, 
    color: color 
    } 
}