javascript - 在 Angular-chart.js 中动态创建的 Canvas 上创建图表

Question

我有一个 div，它需要根据 XHR 响应托管图表或表格。在图表案例中，我需要将 div 内容替换为 chart.js 用于显示图形的 Canvas 元素。

如果我将 canvas 元素添加到 HTML 代码中，angular-chart.js 会呈现一个图形。但是，如果我使用 javascript 将 Canvas 注入(inject)到 div 中， Canvas 元素将在 dom 中，但不会显示图表。

我该如何解决这个问题？

HTML

<div ng-controller="ChartCtrl">
  <div>
    {{chart.name}}
    This works (doughnut):
    <canvas id="chart-{{$index}}" class="chart chart-doughnut" chart-data="chart.data" chart-labels="chart.labels"></canvas>
  </div>
  This Doesn't work ({{chart.type}}):
  <div id="chartDiv"> </div>
</div>

Javascript

var myApp = angular.module('myApp', ['chart.js']);

// Create the controller, the 'ToddlerCtrl' parameter 
// must match an ng-controller directive
myApp.controller('ChartCtrl', function ($scope) {
   var chart_div = $('#chartDiv');
   chart_div.empty();
   canvas_html = '<canvas id="chart-2" class="chart chart-doughnut" chart-data="chart.data" chart-labels="chart.labels"></canvas>';
   console.log(canvas_html)
   chart_div.append(canvas_html);
   //console.log(chart_div)
  $scope.chart =    {
     name: 'Chart 1',
     type: 'Doughnut',
     labels: ['EVSC', 'ISB'],
     data: [13, 44]
   };
});

Plunker 示例:http://plnkr.co/edit/9JkANojIl8EXRj3hJNVH?p=preview

Answer 1

你正在改变 DOM 的结构，你不能以“vanilla”或“jQuery”的方式附加你新创建的元素。

您需要compile您的 HTML 字符串或 DOM 元素到模板中以生成将链接到 scope 的模板函数。该过程将遍历 DOM 树并将 DOM 元素匹配到 directives。 .

// Instantiate the app, the 'myApp' parameter must match what is in ng-app
var myApp = angular.module('myApp', ['chart.js']);

// Create the controller, the 'ToddlerCtrl' parameter must match an ng-controller directive
myApp.controller('ChartCtrl', function ($scope, $compile) {
  canvas_html = '<canvas id="chart-2" class="chart chart-doughnut" chart-data="chart.data" chart-labels="chart.labels"></canvas>';

  var element = angular.element(canvas_html);
  $compile(element)($scope);
  angular.element('#chartDiv').append(element);

  $scope.chart =    {
     name: 'Chart 1',
     type: 'Doughnut',
     labels: ['EVSC', 'ISB'],
     data: [13, 44]
   };
});

您可以在this Plunker example中查看结果.