Я пытаюсь отобразить круговую диаграмму с кодом, который я нашел. Но не в состоянии просмотреть круговую диаграмму. Он продолжает показывать, что я не смог ввести модуль. Но я не уверен, что я иду не так. Проверил несколько примеров онлайн. Кажется, ничто не поможет. Пожалуйста, помогите мне здесь.
Мой index.html:
<html ng-app="angularChartApp">
<head>
<title>AngularJS Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script>
angular.module('pieChart', ['chart.js']);
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="container-fluid ">
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel-title text-center">AngularJS Charts</div>
</div>
<div class="panel-body container-fluid">
<section>
<div class="row well">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<section ng-controller="angularPieChartController" class="">
<div class="row lead">
<div class="col-md-12 text-center">Pie Chart</div>
</div>
<div class="row">
<div class="col-md-12">
<canvas id="pie" class="chart chart-pie" chart-data="data"
chart-labels="labels" chart-options="optionsPie"
chart-colors="colorsPie" chart-options="optionsPie"
chart-click="clickme" chart-hover="hoverme"
chart-dataset-override="PieDataSetOverride">
</canvas>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js"</script>
<script src="Controllers/chartController.js"></script>
</html>
chartController.js:
var app = angular.module('angularChartApp', ['chart.js']);
app.controller('angularPieChartController', function ($scope) {
$scope.labels = ["Internet bill", "School fee", "House budget"];
$scope.data = [100,300,700];
//Make sure to use color codes, instead of color name.
$scope.colorsPie = ['#90EE90', '#FF6600', '#8080FF'];
//PieDataSetOverride is used to draw lines to display the labels
$scope.PieDataSetOverride = [{ yAxisID: 'y-axis-1' }]; //y-axis-1 is the ID defined in scales under options.
$scope.optionsPie = {
legend: { display: true },
responsive: true, // set to false to remove responsiveness. Default responsive value is true.
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}]
}
}
$scope.clickme = function($event){
alert("You've clicked upon "+$event[0]._view.label);
}
$scope.hoverme = function ($event) {
alert("You hovered over " + $event[0]._view.label);
}
});