Highstock Navigator显示两次

时间:2017-11-15 06:03:51

标签: angularjs highcharts highstock

我使用的是highstock,5.0.10, angularJS 。 在我的图表导航器中显示两次,如下面

enter image description here

如您所见,导航器已渲染两次。但是,如果刷新页面,一切看起来都很好。 有什么想法吗?

我在这里添加了我的Highstock代码。

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 "
            }
        });

1 个答案:

答案 0 :(得分:0)

您可以在此处看到一个有效的示例:https://plnkr.co/edit/OphM9wf8WyGm8U6HXfTy

您还没有显示您的HTML视图,但我想它与此类似。

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

关于控制器范围,我没有改变任何事情:

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
            }
        }]
  })

});