通過Angular加載圖表ngRoute不工作

我想通過angularngRoute加載圖表（高圖表庫）ngRoute，但我無法顯示圖表。通過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頁面

在控制檯中沒有錯誤，雖然圖表未加載

加載到主pag e - index.html只有寫入

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

來源

2015-08-26 Ievgen Chernetsov

你肯定你的div是空的？也許它被填充，但有一些CSS問題？檢查鉻開發工具 –

是的，它是空的，我認爲這個問題是在路由 –

這是CSS問題:)謝謝。圖表只顯示在bootstrap divs後面，現在探索如何解決它。非常感謝 –

您可以嘗試創建指令「圖表」，並在鏈接函數中使用$元素來啓動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>

讓我知道，如果這有助於

來源

2015-08-26 16:00:31 Naveen

謝謝，它的工作，雖然主要原因是在CSS :)圖表不顯示在引導div，只在他們身後，探索如何解決它 –

通過Angular加載圖表ngRoute不工作

回答

相關問題