我有一个使用angular.js运行的应用程序,我的一个视图应该加载图表。我正在使用chart.js,但由于某些原因它无法正常工作,我的控制台上没有显示错误。 这是我创建图表的函数:
$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);
}
这是显示图表的HTML:
<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>
我还加载了最新版本的Chart.js:
<!--Chart plugin -->
<script src="bower_components/Chart.js/Chart.js" language="javascript"></script>
我注意到的一件事是画布正在呈现0维:
有人能看到我做错了什么吗?
答案 0 :(得分:2)
问题:我在将视图加载到视图之前调用该函数,因此我使用setTimeout()
来延迟调用writeBatteryChart()
以等待渲染画布。< / p>
答案 1 :(得分:0)
您必须在画布中添加渲染的内容。希望它能帮到Link