highcharts-ng未显示饼图

时间:2016-02-02 07:55:47

标签: javascript jquery html angularjs highcharts

我按照示例“http://jsfiddle.net/pablojim/cp73s/”,但在我的应用饼图中没有显示。我没有使用jquery。

_______ app.js _____

var app = angular.module('abc', [
    'highcharts-ng'
]);
 state('app.graph', {
      url: '/graph',
      templateUrl: appHelper.templatePath('app/graph/piechart'),
      controller: 'graphCtrl'
    }).

______控制器____

angular.module('abc').controller('graphCtrl', function ($scope) {
  $scope.highchartsNG = {
    options: {
      chart: {
        type: 'pie'
      }
    },
    series: [{
      data: [20, 20, 12, 8, 7]
    }],
    title: {
      text: 'Hello'
    },
    loading: false
  }
});

____的index.html ____

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.min.js"></script>

_____ pie.html _____

[....
  <highchart id="chart1" config="highchartsNG"></highchart>
....][1]

1 个答案:

答案 0 :(得分:2)

我认为你错过了另外一个文件。 只需在"highstock.js"

上方加highcharts-ng.js即可

希望这能解决你的问题。

var myapp = angular.module('myapp', ["highcharts-ng"]);

angular.module('myapp').controller('graphCtrl', function ($scope) {
  $scope.highchartsNG = {
    options: {
      chart: {
        type: 'column'
      }
    },
    series: [{
      data: [20, 20, 12, 8, 7]
    }],
    title: {
      text: 'Hello'
    },
    loading: false
  }
});

为你创造小提琴...... http://jsfiddle.net/anilram25/nfg8kqkn/1/