我正在使用angular js，jquery和bootstrap创建网页。
上下文
问题
表格中没有整数值，我想根据“常规”，“代客”和“期限”的次数创建图表。我在互联网上冲浪了很多但没找到任何有用的东西。有关如何执行此操作的任何建议。
我的代码是：
<html ng-app="helloApp">
<head>
<title>Fetch Park</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link
href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link
href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("MyCtrl", function($scope) {
$scope.car = [
{ 'state':'MA',
'plate': 'ABC-123',
'time': '5/6/2016 10:00',
'type': 'Regular'},
{ 'state':'NH',
'plate': 'BDJ-675',
'time': '5/10/2016 15:00',
'type': 'Term'},
{ 'state':'MA',
'plate': 'YHT-957',
'time': '5/18/2016 12:00',
'type': 'Regular'},
{ 'state':'MA',
'plate': 'EST-856',
'time': '5/21/2016 13:00',
'type': 'Valet'},
{ 'state':'NH',
'plate': 'EVH-475',
'time': '5/25/2016 9:00',
'type': 'Regular'},
];
$scope.addRow = function(){
$scope.errortext = "";
if (!$scope.plate) {return;}
if ($scope.car.indexOf($scope.plate) == -1) {
$scope.car.push({ 'state':$scope.state, 'plate': $scope.plate, 'time': $scope.time, 'type': $scope.type });
}else{
$scope.errortext = "The plate already exists";
}
$scope.state='';
$scope.plate='';
$scope.time='';
$scope.type='';
};
$scope.removeRow = function(plate){
var index = -1;
var comArr = eval( $scope.car );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].plate === plate ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
var r = confirm("Are You Sure! You Want To Delete This Row?");
if (r == true) {
$scope.car.splice( index, 1 );
}
};
});
function registrationFormDisplay() {
if (document.getElementById("registrationForm").style.display === "none") {
document.getElementById("registrationForm").style.display = "block";
} else {
document.getElementById("registrationForm").style.display = "none";
}
}
$('#time').click(function() {
var now = new Date();
$('#time-holder').val(Date());
});
</script>
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 300px 250px;
font-family: Montserrat, sans-serif;
}
.container-fluid {
padding: 300px 250px;
}
</style>
</head>
<body ng-controller="MyCtrl" id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="services" class="container-fluid text-center">
<h2>Parked Vehicles</h2>
<div align="center">
<table class="table">
<tr>
<th>State
</th>
<th>Plate
</th>
<th>Time
</th>
<th>Type
</th>
<th>Remove
</th>
</tr>
<tr ng-repeat="comp in car">
<td>{{comp.state}}
</td>
<td>{{comp.plate}}
</td>
<td>{{comp.time}}
</td>
<td>{{comp.type}}
</td>
<td>
<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(comp.plate)"/>
</td>
</tr>
</table>
</div>
<div class="form-group">
<div style="padding-left:110px">
<button onclick="registrationFormDisplay()" class="btn btn-primary">Add Parked Car</button><br><br>
</div>
<div id="registrationForm" style="display: none;">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">State</label>
<div class="col-md-4">
<input type="text" class="form-control" name="state"
ng-model="state" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Plate</label>
<div class="col-md-4">
<input type="text" class="form-control" name="plate"
ng-model="plate" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Time</label>
<div class="col-md-4">
<input type="text" id="time-holder" name="time" class="form-control" ng-model="time"></p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-4">
<input type="radio" checked class="form-control" name="Regular" value="Regular" ng-model="type"> Regular
<input type="radio" class="form-control" name="Valet" value="Valet" ng-model="type"> Valet
<input type="radio" class="form-control" name="Term" value="Term" ng-model="type"> Term
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" id="time" value="Submit" class="btn btn-primary"/>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</form>
</div>
</div>
</body>
</html>
我试过这样做：
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
pie: {
size: 180
}
},
series: [{
data: [
['type', 'Regular'],
['type', 'Valet'],
['type', 'Term'],
]
}]
});