私の質問は、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データをチャートオブジェクトにフィードして、棒グラフを動的に作成したいと考えています。
問題をさらに詳しく説明する必要がある場合はお知らせください。