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只能掩盖问题： - （

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

我在控制器中有这个...

  $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以避免此问题。

没有包含CSS文件？

1 个答案: