我有以下 Index.html:
<!DOCTYPE>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js"></script>
<script src="chart-module.js"></script>
</head>
<body>
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options"></canvas>
</body>
</html>
以及以下图表模块.js:
angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope)
{
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];
});
当我在 Chrome 上运行 Index.html 时，不显示饼图。 我尝试并寻找解决方案，但没有一个对我有用。
我在 Chrome 控制台上没有收到任何错误。 我已关注this教程。
最佳答案
您需要引用chart.js和angular-chart.js的匹配版本
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
演示
angular.module("app", ["chart.js"])
.controller("PieCtrl", function ($scope){
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="PieCtrl">
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options"></canvas>
</body>
</html>关于javascript - AngularJS 饼图不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48732836/