Highstock Navigator zweimal angezeigt

Question

Ich verwende highstock, 5.0.10 mit angularJS. In meinem Chart Navigator wurde zweimal, wie

Wie Sie sehen unter

angezeigt, Navigator zweimal gemacht wurde. Wenn Sie jedoch die Seite aktualisieren, sieht alles gut aus. Irgendwelche Ideen?

Ich habe hier meinen Highstock-Code hinzugefügt.

Highcharts.stockChart('FindComputerUsage', { 

      rangeSelector: { 
       selected: 1 
      }, 
      credits: { 
       enabled: false 
      }, 
      title: { 
       text: '' 
      }, 
      yAxis: { 
       title: { 
        text: 'Percentage of time (%) ' 
       } 

      }, 

      tooltip: { 
       formatter: function() { 

        var date = new Date(requiredData[this.points[0].point.index][0]); 
        return date + '<br>' + 'Percentage:' + requiredData[this.points[0].point.index][1] + '%'; 
       } 
      }, 
      series: [{ 
       name: 'Percentage (%)', 
       data: requiredData, 
       tooltip: { 
        valueDecimals: 2, 
       } 
      }], 
      lang :{ 
       noData : "No data to display " 
      } 
     }); 

Answer 1

Hier können Sie ein funktionierendes Beispiel sehen: https://plnkr.co/edit/OphM9wf8WyGm8U6HXfTy

Sie nicht Ihre HTML-Ansicht zeigen, aber ich denke, es ist ähnlich wie diese ist.

<div ng-controller="demoCtrl"> 
    <div id="container" style="height: 400px; min-width: 310px"></div> 
</div> 

Bezüglich Steuerungsbereich, ich habe nichts ändern:

var app = angular.module('demoApp', []); 

app.controller('demoCtrl', function($scope){ 

    $scope.data = [ 
        [1290729600000,45.00], 
        [1290988800000,45.27], 
        [1291075200000,44.45] 
       ]; 

    Highcharts.stockChart('container', { 
     rangeSelector: { 
      selected: 1 
     }, 

     title: { 
      text: 'Qing Xu Example' 
     }, 

     series: [{ 
      name: 'Value', 
      data: $scope.data, 
      tooltip: { 
       valueDecimals: 2 
      } 
     }] 
    }) 

});