highcharts-ng的加載

Question

當我試圖通過加載對象

$scope.highchartsNG = { 
     options: { 
      chart: { 
       type: 'bar' 
      } 
     }, 
     series: [{ 
      data: [10, 15, 12, 8, 7] 
     }], 
     title: { 
      text: 'Hello' 
     }, 
     loading: true, 

    } 

設置加載功能我已經做到了這一點，但是這是行不通的節目加載圖像。

除此之外我也想顯示加載到顯示圖像像下面的jsfiddle http://jsfiddle.net/86nuH/

讓我知道如果我錯過什麼。

在此先感謝

Answer 1

我懷疑你正在使用此directive。

文件說，$ scope.chartConfig有一個屬性options它類似於highcharts highChartsConfig

我不得不改變性質了一下。

這是更新的Codepen。

控制器：

var myapp = angular.module('myapp', ["highcharts-ng"]); 
myapp.controller('myctrl', function ($scope) { 

$scope.addPoints = function() { 
    var seriesArray = $scope.highchartsNG.series 
    var rndIdx = Math.floor(Math.random() * seriesArray.length); 
    seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20]) 
}; 

$scope.addSeries = function() { 
    var rnd = [] 
    for (var i = 0; i < 10; i++) { 
     rnd.push(Math.floor(Math.random() * 20) + 1) 
    } 
    $scope.highchartsNG.series.push({ 
     data: rnd 
    }) 
} 

$scope.removeRandomSeries = function() { 
    var seriesArray = $scope.highchartsNG.series 
    var rndIdx = Math.floor(Math.random() * seriesArray.length); 
    seriesArray.splice(rndIdx, 1) 
} 

$scope.options = { 
    type: 'line' 
} 

$scope.swapChartType = function() { 
    if (this.highchartsNG.options.chart.type === 'line') { 
     this.highchartsNG.options.chart.type = 'bar' 
    } else { 
     this.highchartsNG.options.chart.type = 'line' 
    } 
} 
$scope.toggleLoading = function() { 
    $scope.highchartsNG.loading = !$scope.highchartsNG.loading 
} 
$scope.highchartsNG = { 
    options: { 
     chart: { 
      type: 'bar' 
      }, 
     loading: { 
     labelStyle: { 
     fontWeight: 'bold', position: 'relative', top: '45%' 
     }, 
     style :{ 
     backgroundImage: 'url("http://jsfiddle.net/img/logo.png")', 
      opacity:0.5, 
      backgroundRepeat:'no-repeat', 
      backgroundSize:'cover', 
      position: 'absolute', 
      width: '100vw', 
      height:'100' 
     } 
    }, 
    lang :{ 
     loading:'Loading...' 
    } 
    }, 
    series: [{ 
     data: [10, 15, 12, 8, 7] 
    }], 
    title: { 
     text: 'Hello' 
    }, 
    loading: false 
} 

}); 

Answer 2

爲什麼不設置加載在這裏：

options: { 
    chart: { 
    type: 'bar', 
    events: { 
     load: function() { 
     this.showLoading(); // show loading message/image 
     } 
    } 
    }, 
    // set options: 
    loading: { 
    labelStyle: { 
     top: '45%', 
     backgroundImage: 'url("http://jsfiddle.net/img/logo.png")', 
     display: 'block', 
     width: '136px', 
     height: '26px', 
     backgroundColor: '#000' 
    } 
    } 
}