我有两个API服务来从两个数据库表中提取json数据。该数据用于生成图表。我设法生成一个这样的条形图与一个表中的数据。另一张图表完全相同。但是,我不想复制代码。你能否告诉我如何使用Angular JS和Highcharts?
我的工作javascript是,(生成一个图表)
var app = angular.module('charts', []);
app.directive('highchart', function () {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(function () { return attrs.chart; }, function () {
if (!attrs.chart) return;
var charts = JSON.parse(attrs.chart);
$(element[0]).highcharts(charts);
});
}
};
});
app.controller('Ctrl', function ($scope, $http, $timeout) {
$http.get('http://localhost:1234/overspeedworst/OverSpeedworst').success(function (data, status) {
var score = [];
for (var i = 0; i < data.length; i++) {
score.push(data[i].Score);
}
var name = [];
for (var i = 0; i < data.length; i++) {
name.push(data[i].Name);
}
$scope.renderChart = {
chart: {
type: 'bar'
},
xAxis: {
categories: name
},
series: [{
data: score
}],
legend: {
enabled: false
}
};
}).error("error message");
$timeout($scope.fetch, 1000);
});
我的HTML是
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dashboard Application</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="Scripts/DashboardCtrl.js"></script>
<link rel="stylesheet" type="text/css" href="Dashboard.css"></link>
</head>
<body>
<table>
<tr>
<td>
<h2>Overspeed (Worst) Scores</h2>
<section ng-app="charts">
<div ng-controller="Ctrl">
<highchart chart='{{renderChart}}'></highchart>
</div>
</section>
</td>
<td>
<h2>Overspeed (Best) Scores</h2>
</td>
</tr>
<tr>
<td>
<h2>Vehicle Mileage</h2>
</td>
<td>
<h2>Servicing Report</h2>
</td>
</tr>
</table>
</body>
</html>
我的目标是以与Overspeed(Worst)得分相同的方式生成第二个名为Overspeed(Best)得分的图表,而代码中没有太多重复(唯一的区别是图表的数据,即$ http中的URL。得到请求)。
因此,我计划编写两个角度工厂函数(或服务),它们将从各个表中检索json数据。然后,我可以在我的控制器中放置一些条件逻辑,具体取决于哪个,控制器将使用来自相应服务的数据构建图表对象。但我无法弄清楚如何做到这一点。任何帮助将不胜感激。
非常感谢