5

私の質問は、AngularJS ディレクティブから Highcharts イベントを処理する方法のリンクに関連していますか? . 動的データからハイチャートを生成したい場合はどうすればよいですか? 私のチャート オブジェクトは以下のように定義/構成されています。凡例: { 有効: false }

Ajaxリクエストから取得したjson文字列から、対応する「名前」と「スコア」データを動的にフィードしたいのですが、次の形式です。

[{"Name":"A","Score":1},{"Name":"B","Score":2}]

他の詳細を提供する必要がある場合はお知らせください。

どうもありがとう。

質問の再構成:

angular jsを使用してハイチャートを作成したい。私の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) {

$scope.overSpeedWorstRecords = [];

$scope.handleOverSpeedWorstRecords = function (data, status) {
    $scope.overSpeedWorstRecords = data;      
}


$http.get('http://localhost:12345/abc/pqr').success($scope.handleOverSpeedWorstRecords).error("error message");


$timeout($scope.fetch, 1000);


$scope.renderChart = {
    chart: {
        type: 'bar'
    },
    series: [{
         name: 'A,B,C,D',
        score: [1,2,2,3]
    }],
    legend: {
        enabled: false
    }
};
});

Ajax クエリ ($http.get) を使用して、overSpeedWorstRecords で json データを取得しています。さらに、'name' と 'score' がハードコードされたチャート オブジェクトを定義しました。このセットアップでは、ハイチャートにハードコードされたデータをロードし、次のように HTML でアクセスできる 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>  
 </head>
 <body>
  <section ng-app="charts">
   <div ng-controller="Ctrl">
        <highchart chart='{{renderChart}}'></highchart>
        <table>
            <tr ng-repeat="record in overSpeedWorstRecords">
                <td>{{record.Name}}</td>
                <td>{{record.Score}}</td>
            </tr>
        </table>
   </div>
  </section>
 </body>
</html>

ただし、Ajax呼び出しで取得しているjsonデータをチャートオブジェクトにフィードして、棒グラフを動的に作成したいと考えています。

問題をさらに詳しく説明する必要がある場合はお知らせください。

4

1 に答える 1

9

問題の解決策:-

私は自分で問題を解決しました。将来の参考のためにこのソリューションを投稿しています。同じ要件を持つ人に役立つ場合があります。

json データから Name と Score にアクセスできるように、javascript が変更されました。これらは、ハイチャートをレンダリングするためにチャート オプション オブジェクトに渡された「name」および「score」配列に格納されていました。

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/abc/pqr').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);
});
于 2013-07-08T16:01:46.853 に答える