Highcharts无法自动换行标注

Question

我试图创建标注但无法自动换行标注。 这是我的代码和小提琴..

https://jsfiddle.net/7pq3po3o/9/

课程 - 标注需要换行。

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="remove">
  REmove callouts
</button>

Jquery的

$(document).ready(function() {

  remove_labels = false
  gen_points = {
    "0": [{
      "x_axis": "0.8",
      "y_axis": "09/07/2016 00:00",
      "point": "0",
      "callout": "This is a callout that needs to be broken",
      "y_axis_position": ""
    }]
  }

  var drawchart = 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) {
      console.log('redraw called')
      var xAxis;
      var yAxis;
      if (Object.keys(gen_points).length === 0) {
        // alert('empty object')
      } else {
        for (var key in gen_points) {
          console.log('******generate callouts******* == ')
          xAxis = chart.xAxis[0]
          yAxis = chart.yAxis[0]
          gen_points[key].forEach(function(obj, index) {
            point_val = gen_points[key][index]['point']
            callout = gen_points[key][index]['callout']
            series = chart.series[parseInt(key)]
            point = series.data[parseInt(point_val)];
            console.log('gen_points == ', gen_points)
            console.log('xAxis == ', xAxis)
            console.log('yAxis == ', yAxis.toPixels)
            console.log('series == ', series)
            console.log('point == ', point)
            console.log('point plotX == ', point.plotX)
            console.log('chart.plotLeft == ', chart.plotLeft)
            console.log('xAxis == ', point.plotX + chart.plotLeft)
            console.log('point plotY == ', point.plotY)
            console.log('chart.plotTop == ', chart.plotTop)
            console.log('yAxis == ', point.plotY + chart.plotTop)

            if (remove_labels) {
              console.log(chart.renderer.label)
              var a = chart.renderer.label('<div class="callout top">' + callout + '</div>',
                point.plotX + chart.plotLeft + 10,
                point.plotY + chart.plotTop - parseInt(y_axis_position), 'callout', null, null, true).destroy();
              alert('destroy')
              console.log('a', a);
            } else {

              var a = chart.renderer.label('<div class="callout top">' + callout + '</div>', point.plotX + chart.plotLeft + 10, point.plotY + chart.plotTop - 30, 'callout', null, null, true).add();
              console.log('a', a);
            }


          })
        }
      }
    };

    $('#container').highcharts({
      chart: {
        // type: 'bar',
        events: {
          load: function() {
            // alert('load')        
            addCallout(this);
          },
          redraw: function() {
            // alert('redraw')
            addCallout(this);
          },
        }
      },
      title: {
        text: 'Spikes Graph',
        x: -20 //center
      },
      subtitle: {
        text: '',
        x: -20
      },
      series: [{
        turboThreshold: 2000 // to accept point object configuration
      }],
      xAxis: {
        categories: categories,
        tickInterval: 60,
      },
      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
        }

      ]
    });
  };

  drawchart()

  $('#remove').on('click', function() {
    console.log('remove clicked')
    remove_label = true
    $('.callout').remove();
  })

})