javascript 如何使用来自 Ajax 请求的 json 数据生成 highchart（使用 angular js）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17451941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to produce a highchart (using angular js) with json data coming from an Ajax request
提问by user2547150
My question is related to the link How to handle Highcharts events from an AngularJS directive?. What if I want to have the highchart generated from dynamic data? my chart object is defined/configured as below, chart: { type: 'bar' }, series: [{ name: 'A,B,C,D', score: [1,2,2,3] }], legend: { enabled: false }
我的问题与链接如何处理来自 AngularJS 指令的 Highcharts 事件有关？. 如果我想从动态数据生成 highchart 怎么办？我的图表对象定义/配置如下，图表：{ type: 'bar' }, series: [{ name: 'A,B,C,D', score: [1,2,2,3] }],图例：{启用：假}
I want to feed the corresponding 'name' and 'score' data dynamically from json string obtained from Ajax request and is of the form,
我想从从 Ajax 请求中获得的 json 字符串动态地提供相应的“名称”和“分数”数据，并且格式如下，
[{"Name":"A","Score":1},{"Name":"B","Score":2}]
[{"姓名":"A","分数":1},{"姓名":"B","分数":2}]
Please let me know if i need to provide any other details.
如果我需要提供任何其他详细信息，请告诉我。
Many Thanks.
非常感谢。
Re-framing the question:
重新定义问题：
I want to create a highchart using angular js. My javascript file is
我想使用 angular js 创建一个 highchart。我的 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
}
};
});
I am getting my json data in overSpeedWorstRecords through an Ajax query ($http.get). Additionally, I have defined a chart object with 'name' and 'score' hardcoded. With this setup I am having the highchart loaded with hardcoded data and I am getting the json data as well which I can access in the HTML as follows,
我通过 Ajax 查询 ($http.get) 在 overSpeedWorstRecords 中获取我的 json 数据。此外，我定义了一个带有“名称”和“分数”硬编码的图表对象。通过这个设置，我让 highchart 加载了硬编码数据，我也得到了 json 数据，我可以在 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>
However, I want to feed the json data which I am getting through the Ajax call, to the chart object to create the bar chart dynamically.
但是，我想将通过 Ajax 调用获得的 json 数据提供给图表对象以动态创建条形图。
Please let me know if I need to elaborate the problem further.
如果我需要进一步阐述这个问题，请告诉我。
回答by user2547150
Solution to the Problem:-
问题的解决方案：-
I solved the problem by myself. I am posting this solution for my future reference and in case it helps somebody having the same requirement.
我自己解决了这个问题。我发布此解决方案以供将来参考，以防万一它对有相同要求的人有所帮助。
The javascript was modified so that the Name and Score could be accessed from the json data. They were stored in the 'name' and 'score' arrays which were passed to the chart option object in order to render the highchart.
修改了 javascript，以便可以从 json 数据访问 Name 和 Score。它们存储在 '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);
});
