问题描述: 在使用AngularJS和Chart.js时,表达式未执行,导致图表无法正常显示。
解决方法:
确保正确引用了AngularJS和Chart.js的库文件。
在AngularJS的控制器中,使用$scope对象将数据传递给图表。 例如:
app.controller('ChartController', function($scope) {
// 定义数据
$scope.data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
};
// 配置选项
$scope.options = {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
};
});
app.controller('ChartController', function($scope) {
// ...
// 绘制图表
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: $scope.data,
options: $scope.options
});
});
通过上述步骤,我们可以解决AngularJS和Chart.js中表达式未执行的问题,并正常显示图表。