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

Loading chart via Angular ngRoute not working

本文关键字：不起作用 加载 Angular ngRoute 通过      更新时间：2023-09-26

我试图通过angular ngRoute加载图表(highcharts库)，但我无法显示图表。

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//联系人/some.html页

控制台没有错误，尽管图表没有加载

加载在主页- index.html只有当写入

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

你可以尝试创建一个指令"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>

如果有帮助请告诉我

相关文章：