如何产生highchart（采用了棱角分明的js）和JSON数据从Ajax请求来 [英] How to produce a highchart (using angular js) with json data coming from an Ajax request
问题描述
我的问题是有关的链接<一个href=\"http://stackoverflow.com/questions/16287727/how-to-handle-highcharts-events-from-an-angularjs-directive\">How从一个AngularJS指令处理Highcharts事件？。如果我想有从动态数据生成的highchart？我的图表对象定义/如下配置，
图：{
类型：'棒'
}，
系列：[{
名称：'A，B，C，D'，
评分：[1,2,2,3]
}]，
传说：{
启用：假的
}
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 }
我想从Ajax请求获得JSON字符串动态喂相应的'名'和'分数'数据的形式是，
I want to feed the corresponding 'name' and 'score' data dynamically from json string obtained from Ajax request and is of the form,
[{姓名：A，分数：1}，{姓名：B，分数：2}]
[{"Name":"A","Score":1},{"Name":"B","Score":2}]
请让我知道如果我需要提供任何其他细节。
Please let me know if i need to provide any other details.
非常感谢。
重新制定了一个问题：
我要创建采用了棱角分明的JS highchart。我的JavaScript文件是
I want to create a highchart using angular js. My javascript file is
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数据。此外，我已经定义了一个图表对象以'名'和'分数'硬codeD。有了这个设置我有装有硬codeD数据highchart和我得到的JSON数据，以及我可以在HTML访问如下，
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,
<!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数据。
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.
请让我知道如果我需要进一步阐述这个问题。
Please let me know if I need to elaborate the problem further.
推荐答案
解决的问题： -
我自己解决了这个问题。我贴我的将来参考解决方案，并在情况下，它可以帮助有同样的要求别人。
I solved the problem by myself. I am pasting the solution for my future reference and in case it helps somebody having the same requirement.
JavaScript的修改，这样的名称和分数可以从JSON数据进行访问。他们被储存在被传递到图表的选择对象，以使highchart的'名'和'分数'的阵列。
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.
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);
});
这篇关于如何产生highchart（采用了棱角分明的js）和JSON数据从Ajax请求来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
