Javascript 通过非工作路线装载图表

我试图通过

angular

ngRoute

加载图表（highcharts库），但无法显示图表

这是我的配置

    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: '/'
       });


      });

这些是我的控制器

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 */

app.directive（“图表”，函数（）{
返回{
模板：“”，
限制：'E'，
范围：{
数据：“=”//双向绑定
},
替换：正确，
控制器：“CustomCtrl”，
链接：函数（$scope，element，$attrs）{
var mapChart=$（元素）.highcharts（'区域'{
图表：{
renderTo:$（元素）.attr（'id'））
}，系列：[
{
名称：'国家'，
mapData:mapData，
颜色：'#e0'，
enableMouseTracking:false
}，/*等等*/

并在html页面中添加以下行

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

---

让我知道这是否有帮助

你确定你的div是空的吗？也许它已经填充了，但是有一些css问题？检查chrome开发工具是的，它是空的，我认为问题在路由中它是css问题：）谢谢。图表只显示在引导div后面，现在正在探索如何修复它。谢谢一个lotbtw避免使用

$（函数（）{$（“#container”）.highcharts（{}）

它是-旧的、不合法的、脏的、坏的、不棱角分明的、意大利面代码谢谢，它是有效的，尽管主要原因是css:）图表没有显示在引导div中，只是在它们后面，探索如何修复它