Highcharts-ng 未显示饼图

highcharts-ng is not displaying pie chart

本文关键字:显示 Highcharts-ng      更新时间:2023-09-26

我遵循示例"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]

我想你又缺少一个文件。只需包括上面的"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/