Angularjs 在控制器内有条件地使用角度服务或工厂功能_Angularjs_Highcharts

Angularjs 在控制器内有条件地使用角度服务或工厂功能

angularjs highcharts

Angularjs 在控制器内有条件地使用角度服务或工厂功能,angularjs,highcharts,Angularjs,Highcharts,我有两个API服务从两个DB表中提取json数据。这些数据被用来制作图表。我已经设法用一个表中的数据生成了一个这样的条形图。另一张图表将完全相同。但是，我不想重复代码。你能告诉我如何用角JS和海图来做吗我的工作javascript是，（生成一个图表） var-app=angular.module（'charts'，[]）；应用指令（'highchart'，函数（）{ 返回{ 限制：'E'，模板：“”，替换：正确，链接：函数（范围、元素、属性）{ 作用域.$watch（函数（）{retu

我有两个API服务从两个DB表中提取json数据。这些数据被用来制作图表。我已经设法用一个表中的数据生成了一个这样的条形图。另一张图表将完全相同。但是，我不想重复代码。你能告诉我如何用角JS和海图来做吗

我的工作javascript是，（生成一个图表）

var-app=angular.module（'charts'，[]）；
应用指令（'highchart'，函数（）{
返回{
限制：'E'，
模板：“”，
替换：正确，
链接：函数（范围、元素、属性）{
作用域.$watch（函数（）{return attrs.chart；}，函数（）{
如果（！属性图表）返回；
var charts=JSON.parse（attrs.chart）；
$（元素[0]）。高图（图表）；
});
}
};
});
app.controller（'Ctrl'，函数（$scope，$http，$timeout）{
$http.get（'http://localhost:1234/overspeedworst/OverSpeedworst）。成功（功能（数据、状态）{
var得分=[]；
对于（变量i=0；i


我的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（Best）score的图表，其方式与Overspeed（Best）score相同，代码中没有太多重复（唯一的区别是图表的数据，即$http.get请求中的URL）
因此，我计划编写两个angular factory函数（或服务），从相应的表中检索json数据。然后，我可以在我的控制器中放入一些条件逻辑，根据这些条件，控制器将使用来自相应服务的数据构建图表对象。但我不知道怎么才能做到这一点。任何帮助都将不胜感激
非常感谢
<!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>