Файл CSS не включен?

Question

Сначала вы можете прочитать [обновление], поскольку характер проблемы изменился.

Я пытаюсь добавить графику в приложение AngularJs. Я получаю следующее сообщение об ошибке

angular.js:13236 Error: Please set height and width for the chart element 
    at validateHeightAndWidth (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:138:15) 
    at link (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:106:7) 
    at http://localhost/plafotrm_2/js/angular/angular.js:9486:44 
    at invokeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:9492:9) 
    at nodeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8978:11) 
    at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8226:13) 
    at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) 
    at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) 
    at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) 
    at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) <div id="chart1" ac-chart="chartType" ac-data="chartData" ac-config="chartConfig" class="ng-isolate-scope"> 

Однако, в моем index.html, я <link rel="stylesheet" href="css/charts.css" /> и css/charts.css, я

.chartStyle 
{ 
    width: 500px; 
    height: 500px; 
} 

и схема должна идти в

<div 
    data-ac-chart="bar" 
    data-ac-data="chartData" 
    data-ac-config="chartConfig" 
    class="chartStyle" > 
</div> 

Все это выглядит хорошо для меня, и я скопировал с Plunk.

Уверен, что я потянул правильный файл CSS, потому что, если я его переименую, я получаю сообщение об ошибке в консоли разработчика. Но даже без ошибок в файле CSS я получаю приведенную выше ошибку.

Любые идеи, кто-нибудь?

---

[Update] После применения комментарий @SteveCampbell х и ответ, там сейчас нет ошибки в консоли разработчика - увы, также не диаграммы на странице :-(

HTML, выглядит следующим образом

<div data-ac-chart="'bar'" data-ac-data="chartData" data-ac-config="chartConfig" class="chartStyle ng-isolate-scope"></div> 

нет высоты или ширины, так что waitForHeightAndWidth : true только маскирует проблему :-(

Я думаю, что нужно читать документы ...

У меня есть это в контроллере ...

$scope.chartConfig = { 
    title: 'Products', 
    tooltips: true, 
    labels: false, 
    waitForHeightAndWidth : true, 
    mouseover: function() {}, 
    mouseout: function() {}, 
    click: function() {}, 
    legend: { 
     display: true, 
     //could be 'left, right' 
     position: 'right' 
    } 
    }; 

    $scope.chaartData = { 
    series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'], 
    data: [{ 
     x: "Laptops", 
     y: [100, 500, 0], 
     tooltip: "this is tooltip" 
    }, { 
     x: "Desktops", 
     y: [300, 100, 100] 
    }, { 
     x: "Mobiles", 
     y: [351] 
    }, { 
     x: "Tablets", 
     y: [54, 0, 879] 
    }] 
    }; 

Answer 1

Проблема не связана с CSS. Вероятно, это происходит из-за того, что элемент диаграммы изначально не отображается в первом цикле дайджеста, и, таким образом, он получает ошибку при попытке определить высоту и ширину.

Считается, что вы можете установить config.waitForHeightAndWidth на номер true, чтобы избежать этой проблемы.