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、I <link rel="stylesheet" href="css/charts.css" />とcss/charts.cssで、I

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

とチャートは

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

これは、すべてのルックスに行くことになっています私にはうまくいって、Plunkからコピーしました。

名前を変更しても開発者コンソールにエラーが表示されるので、正しいCSSファイルを取得していると確信しています。しかし、CSSファイルに関するエラーがなくても、上記のエラーが出ます。

---

[更新] @SteveCampbellのコメントと答えを適用した後、今デベロッパーコンソールでエラーがない - ああ、また

HTML :-(ページにはチャートがありませんwaitForHeightAndWidth : trueだけ

:-(問題をマスクしていることを、私は私がする必要があると思うので、この

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

なし、高さや幅のように見えます私は、コントローラでこれを持っている...

をドキュメントを読んで...

$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とは関係ありません。おそらく、最初のダイジェストサイクルでチャート要素が最初に表示されないため、高さと幅を決定しようとするとエラーが発生するためです。

Readmeのhttps://github.com/chinmaymk/angular-chartsには、この問題を回避するためにconfig.waitForHeightAndWidth〜trueを設定することができます。