Ajaxリクエストから来るjsonデータでハイチャート（角度jを使用）を生成する方法

私の質問はリンクHow to handle Highcharts events from an AngularJS directive?に関連しています。ダイナミックデータからハイチャートを生成したい場合はどうすればよいですか？私のグラフオブジェクトは、チャート/定義され、以下のように構成されている：{ タイプ： 'バー' を}、シリーズ：[{ 名： 'A、B、C、D'、スコア：[1,2,2- 、3] }]、凡例：{ 有効：偽 }Ajaxリクエストから来るjsonデータでハイチャート（角度jを使用）を生成する方法

Iは、Ajaxリクエストから取得したJSON文字列から動的に対応する「名前」と「スコア」のデータを供給したい形式である

、

[{"名前"： "A"、 "スコア"：1}、{"名前"： "B"、 "スコア"：2}

その他の詳細をお知らせください。

多くのありがとうございます。

は再フレーミング質問：

私は角のJSを使用してhighchartを作成したいです。私はAjaxのクエリ（$ http.get）を介してoverSpeedWorstRecordsで私のJSONデータを取得しています

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 
    } 
}; 
});

私のjavascriptのファイルです。さらに、私は 'name'と 'score'がハードコードされたチャートオブジェクトを定義しました。この設定で、私はハードコードされたデータをロードhighchartを持っていると私は、しかし、次のように私は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> 
</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>

をJSONデータを取得しています、私は私がJSONデータを送りたいですAjaxコールを介してチャートオブジェクトに渡し、棒グラフを動的に作成します。

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

出典

2013-07-03 user2547150

問題は解決されている問題の最小限の理解を示している必要があります。あなたが何をしようとしたのか、なぜそれがうまくいかなかったのか、そしてどのように機能するのかを教えてください。関連項目：[Stack Overflow question checklist]（http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist） – Stewie

ソリューション： -

私は自分自身で問題を解決しました。私は将来の参照のためにこのソリューションを投稿しています。

名前とスコアにjsonデータからアクセスできるように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-08 16:01:46 user2547150

渡された 'attrs'属性を使用して変更を監視する代わりに、ディレクティブのスコープ属性。これにより、コントローラからリテラル変数またはスコープ変数を渡すことができます。これは以前はエラーの原因になっていましたが、修正されました https://github.com/angular/angular.js/pull/5385 –

Ajaxリクエストから来るjsonデータでハイチャート（角度jを使用）を生成する方法

答えて

関連する問題