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'
    }
  }
}