Chart.js 未显示在我的视图中
Chart.js not showing in my view
我有一个应用程序 运行 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>
我注意到的一件事是 canvas 以 0 维呈现:
有人能看出我哪里做错了吗?
您必须在 canvas 中添加渲染的内容。希望对你有帮助Link
问题:我在 canvas 加载到视图之前调用函数,所以我使用 setTimeout()
延迟调用 writeBatteryChart()
以便等待canvas 被渲染。
我有一个应用程序 运行 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>
我注意到的一件事是 canvas 以 0 维呈现:
有人能看出我哪里做错了吗?
您必须在 canvas 中添加渲染的内容。希望对你有帮助Link
问题:我在 canvas 加载到视图之前调用函数,所以我使用 setTimeout()
延迟调用 writeBatteryChart()
以便等待canvas 被渲染。