Angular-Chart not rendering anything

问题

I'm building an app using AngularJS. In this app I want to show a line-chart with some data. I got a page with two 'tabs'. I used my own implementation for this: Two buttons at the top, $scope.graph.visible boolean which is being set by clicking those buttons.

This is the chart in the HTML:

<canvas 
  data="{{graph.data}}"
  labels="{{graph.labels}}"
  options="{{graph.options}}"
  legend="{{graph.legend}}"

  ng-show="{{graph.visible}}">
</canvas>

In the controller I got this:

  $scope.graph.data = [1, 2, 3, 4, 5, 6, 7, 8];
  $scope.graph.labels = ['hoi', 'doei', 'hallo', 'hee', 'hoi', 'doei', 'hallo', 'hee',];
  $scope.graph.options = {
    animation: false
  };
  $scope.graph.legend = true;

In the source of the page I see this (when the graph should be visible):

<canvas data="[1,2,3,4,5,6,7,8]" labels="["hoi","doei","hallo","hee","hoi","doei","hallo","hee"]" options="{"animation":false}" series="" colours="" getcolour="" click="" hover="" legend="true" ng-show="true" class="ng-hide" style="">
</canvas>

EDIT// I wonder why it has the class ng-hide

EDIT2// When I manually remove the ng-hide class I can see a white block with web inspector. Otherwise I can''t even find that.

EDIT3// Also, when I add class="" in the HTML-file, it doesn't remove the ng-hide class.

EDIT4// http://plnkr.co/edit/2Wr3HvMzcwfQG2tmsJgX?p=preview

回答1:

You don't have to use {{}} when it's data from the scope, so you have to change like this :

<canvas 
    class="chart chart-line"
    data="graph.data"
    labels="graph.labels"
    series="graph.series"
    options="graph.options"
    legend="graph.legend"
    ng-show="graph.visible">
  </canvas>

Furthermore, data should be an array of array like

$scope.graph.data = [[1, 2, 3, 4, 5, 6, 7, 8]];

See the working Plunker here (fixed by Grundy in the comments) : http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview

回答2:

Adding following div container over the canvas solved the problem for me, check the following:

<div class="chart-container" ng-show="graph.visible">
  <canvas #myChart class="my-4" width="900" height="380"></canvas>
</div>

来源：https://stackoverflow.com/questions/29795409/angular-chart-not-rendering-anything

标签

javascript

angularjs

chart.js