Chart.js nicht zeigt in meiner Sicht
Habe ich eine app läuft mit angular.js und einer meiner Ansicht sollte das laden einer Grafik. Ich bin mit chart.js für Sie, aber aus irgendeinem Grund funktioniert es nicht und es wird kein Fehler gezeigt, auf meiner Konsole.
Hier ist meine Funktion, die erstellt das Diagramm:
$scope.writeBatteryChart = function(){
console.log("Function was called");
var data = {
labels: ["10:30am", "11:00am", "11:30am", "12:00pm", "12:30pm", "01:00pm", "01:30pm"],
datasets: [
{
label: "Battery",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var options = {
responsive: true,
bezierCurve : false
}
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
}
Hier die HTML-Ausgabe, wo das Diagramm erscheinen soll:
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8" style="padding-left: 0px;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Battery <i class="fi-battery-half"></i></h3>
</div>
<div class="panel-body">
<canvas id="myChart" height="300"></canvas>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="padding-left: 0px; padding-right: 0px;">
</div>
</div>
und ich bin auch laden Sie die neueste version von der Chart.js:
<!--Chart plugin -->
<script src="bower_components/Chart.js/Chart.js" language="javascript"></script>
Eine Sache, die mir aufgefallen ist, dass das canvas gerendert wird mit 0 Abmessungen:
Tut, kann jemand sehen, wo ich was falsch mache?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem: ich war dem Aufruf der Funktion bevor Sie die Leinwand geladen werden auf der Ansicht, so habe ich ein
setTimeout()
zu nennen, diewriteBatteryChart()
mit einer Verzögerung, um zu warten, dem canvas gerendert werden.Müssen Sie fügen Sie Ihre gerenderten Sachen innerhalb des canvas-Bereichs. Hoffe, es wird helfen, Link