highcharts无法创建绘图带

Question

我试图创建情节带，但无法正常工作。

这是我的小提琴和代码。

https://jsfiddle.net/z0h85fku/

的Javascript

$(function() {
  categories = ["09/07/2016 00:00", "09/07/2016 00:01", "09/07/2016 00:02", "09/07/2016 00:03", "09/07/2016 00:04"]
  rate_1 = [0.8, 0.54, 0.6, 0.3, 0.4]
  rate_2 = [0.33, 0.16, 0.33, 0.3, 0.38]
  rate_3 = [0.03, 0.04, 0.05, 0.03, 0.01]

  var addCallout = function(chart) {
    $('.callout').remove();
    var xAxis = chart.xAxis[0],
      yAxis = chart.yAxis[0],

      series = chart.series[0],
      point = series.data[0];
    console.log('xAxis == ', xAxis)
    console.log('yAxis == ', yAxis.toPixels)
    console.log('series == ', series)
    console.log('point == ', point)
    console.log(point.plotY)
    console.log(point.plotX)

    var a = chart.renderer.label('<div class="callout top">This is the callout text!</div>', point.plotX + chart.plotLeft - 20,
      point.plotY + chart.plotTop - 70, 'callout', null, null, true).add();

  };

  $('#container').highcharts({
    chart: {
      // type: 'bar',
      events: {
        load: function() {
          addCallout(this);
        },
        redraw: function() {
          addCallout(this);
        },
      }
    },
    title: {
      text: 'Spikes Graph',
      x: -20 //center
    },
    subtitle: {
      text: '',
      x: -20
    },
    events: {
      load: function() {

        // addCallout(this);
      },
      redraw: function() {
        addCallout(this);
      },
    },
    series: [{
      turboThreshold: 2000 // to accept point object configuration
    }],
    xAxis: {
      categories: categories,
<!--        tickInterval: 60,-->
      plotBands: [{
                                color: 'orange', // Color value
                                // from: Date.UTC(09/07/2016 02:00), // Start of the plot band
                                // Date.UTC(year,month,day,hours,minutes,seconds,millisec)
                                from: Date.UTC(2016,9,7,0,0),
                                to: Date.UTC(2016,9,7,4,0)
                                // to: '09/07/2016 05:00' // End of the plot band
                              }],
                             type:'datetime'
    },
    yAxis: {
      title: {
        text: 'Error Rate'
      },
      min: 0,
      max: 5,
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }],
      labels: {
        format: '{value} %'
      }
    },
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [
      // {turboThreshold: 2000 },
      {
        name: 'Rate-1',
        data: rate_1,
        turboThreshold: 2000,
        lineWidth: 1,
        dataLabels: {
          enabled: true,
          useHTML: true,
          style: {
            fontWeight: 'bold'
          },
        },
      }, {
        name: 'Rate-2',
        data: rate_2,
        turboThreshold: 2000,
        lineWidth: 1
      }, {
        name: 'Rate-3',
        data: rate_3,
        turboThreshold: 2000,
        lineWidth: 1
      }

    ]
  });
});