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が、私はプロパティを少し変更しなければならなかったhighcharts highChartsConfig

に似ている性質optionsを持っていると言います。

これは更新された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' 
    } 
    } 
}