我有一个 div 需要根据 XHR 响应托管图表或表格。在图表的情况下,我需要将 div 内容替换为 chart.js 用来显示图表的画布元素。
如果我将 canvas 元素添加到 HTML 代码中,angular-chart.js 会呈现一个图形。但是,如果我使用 javascript 将画布注入 div,则画布元素将位于 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