Question

我正在尝试通过angular ngRoute加载图表（高图库），但我无法显示图表。

JS - 这是我的配置

    var app = angular.module('myApp', [
     'ngRoute'
     ]);

      app.config(function($routeProvider) {
      $routeProvider
      .when('/', {
       templateUrl: 'some.html',
       controller: 'MainCtrl'
       })
       .when('/contacts/:_id', {
       templateUrl: 'contacts/some.html',
       controller: 'SecondCtrl'
       })
       .otherwise({
        redirectTo: '/'
       });


      });

JS - 这些是我的控制器

app.controller('MainCtrl', ['$scope', function($scope) {
// some code here
}]);

app.controller('SecondCtrl', ['$scope', function($scope) {
//some code here
// drawing chart function
$(function () {
        $('#container').highcharts({
            //rest of the code
}]);

HTML //contacts/some.html page

控制台中没有错误，但图表未加载

在主页面上加载 - 仅在编写

时使用index.html

<div ng-controller="SecondCtrl">
    <div id="container"></div>
</div>

Answer 1

您可以尝试创建指令“chart”并在link函数中使用$ element来启动Highchart对象。如下所示：

app.directive("chart", function () {
return {
    template: '<div id="chartContainer" style="height: 500px; min-width: 310px; max-width: 1024px; margin: 0 auto"></div>',
    restrict: 'E',
    scope: {
        data: "=" // two way binding
    },
    replace: true,
    controller: 'CustomCtrl',
    link: function ($scope, element, $attrs) {

            var mapChart = $(element).highcharts('Area', {
                chart: {
                    renderTo: $(element).attr('id')
                },series: [
                {
                    name: 'Countries',
                    mapData: mapData,
                    color: '#E0E0E0',
                    enableMouseTracking: false
                },/* so on */

在你的html页面中添加以下行

    <div class="container" ng-controller="CustomCtrlas customCtrl">
       <chart class="container" data='customCtrl.chartData'>
    </div>

如果有帮助，请告诉我

通过Angular ngRoute加载图表不起作用

1 个答案: