gpt4 book ai didi

javascript - 如何使用来自 Ajax 请求的 json 数据生成高图(使用 angular js)

转载 作者:数据小太阳 更新时间:2023-10-29 05:58:18 25 4
gpt4 key购买 nike

我的问题与链接 How to handle Highcharts events from an AngularJS directive? 有关.如果我想从动态数据生成高图怎么办?我的图表对象定义/配置如下,图表: { 类型:'酒吧' }, 系列: [{ 名称:'A,B,C,D', 分数:[1,2,2,3] }], 传奇: { 启用:假

我想从 Ajax 请求获得的 json 字符串中动态地提供相应的“名称”和“分数”数据,其形式为,

[{"姓名":"A","得分":1},{"姓名":"B","得分":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 数据。此外,我还定义了一个带有“名称”和“分数”硬编码的图表对象。通过此设置,我在 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>

但是,我想将通过 Ajax 调用获得的 json 数据提供给图表对象以动态创建条形图。

如果我需要进一步详细说明问题,请告诉我。

最佳答案

问题的解决方案:-

我自己解决了这个问题。我发布此解决方案以供将来引用,以防它帮助有相同要求的人。

javascript 已修改,以便可以从 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) {
$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);
});

关于javascript - 如何使用来自 Ajax 请求的 json 数据生成高图(使用 angular js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17451941/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com