1

2 つの DB テーブルから抽出された json データを取得するための 2 つの API サービスがあります。データはチャートの作成に使用されています。1 つのテーブルのデータを使用して、そのような棒グラフを 1 つ生成することができました。もう一方のチャートもまったく同じです。ただし、コードを複製したくありません。Angular JS と Highcharts でそれを行う方法を教えてください。

私の作業中のJavaScriptは、（1つのチャートを生成します）

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>

私の目的は、オーバースピード (ワースト) スコアと同じ方法で、オーバースピード (ベスト) スコアと呼ばれる 2 番目のチャートを、コード内であまり重複せずに作成することです (唯一の違いは、チャートのデータ、つまり $http.get リクエストの URL です)。 .

したがって、それぞれのテーブルから json データを取得する 2 つの角度ファクトリ関数 (またはサービス) を作成することを計画しました。次に、コントローラーに条件付きロジックを配置することができます。コントローラーは、それぞれのサービスからのデータを使用してチャート オブジェクトを構築します。しかし、これを行う方法がわかりませんでした。どんな助けでも大歓迎です。

どうもありがとう

4

0 に答える 0