没有包含 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 文件的错误，我也会收到上面显示的错误。

任何想法，任何人？

---

[更新]应用@SteveCampbell 的评论和回答后，开发人员控制台中现在没有错误 - 唉，页面上也没有图表:-(

HTML 看起来像这样

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

没有高度或宽度，所以waitForHeightAndWidth : true只是掩盖了问题:-(

我想我需要阅读文档 ...

我在 Controller 中有这个......

  $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 无关。发生这种情况的原因可能是图表元素在第一个摘要循环中最初不可见，因此在尝试确定高度和宽度时会出错。

关于 https://github.com/chinmaymk/angular-charts 的自述文件暗示您可以将 config.waitForHeightAndWidth 设置为 true 以避免此问题。