Ich habe eine div, die abhängig von einer XHR-Antwort ein Diagramm oder eine Tabelle hosten muss. Im Chartfall muss der div-Inhalt durch ein canvas-Element ersetzt werden, das chart.js zum Anzeigen eines Graphen verwendet.Erstellen Sie ein Diagramm auf einer dynamisch erstellten Zeichenfläche in Angular-chart.js
Wenn ich das canvas-Element zum HTML-Code hinzufüge, rendert angle-chart.js ein Diagramm. Wenn ich die Zeichenfläche jedoch mithilfe von JavaScript in ein div-Objekt einfüge, befindet sich das Element canvas im Dom, aber das Diagramm wird nicht angezeigt.
Wie kann ich das umgehen?
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 Beispiel: http://plnkr.co/edit/9JkANojIl8EXRj3hJNVH?p=preview
Super! Ich muss das verdauen. Danke für die schnelle Antwort! – Lmwangi