【发布时间】：2018-10-17 01:41:43
【问题描述】：
使用 Highcharts 示例 (here)，我在 AngularJs 中加载了条形图。
HTML 代码如下：
<!DOCTYPE html>
<html ng-lang="en" ng-app="myModule">
<head>
<meta charset="ISO-8859-1">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<title>Insert title here</title>
</head>
<script>
angular.module('myModule',[])
.controller('myController',function($q, $scope, $http){
$scope.cnt = 1;
var t = 0;
setInterval(function(cnt){
fetchData($scope.cnt).then(function(success){
$scope.chartOptions={
chart: {
type: 'bar',
events:{
load:function(){
var rowClass = this.series[0];
console.log("rowClass : "+rowClass);
}
}
},
title: {
text: 'ClassNames By Count Chart'
},
subtitle: {
text: 'Admin Chart'
},
xAxis: {
categories: $scope.rows,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: (function(){
var data = [];
var i;
console.log("In Series function() : $scope.num : "+$scope.num ); //Update is being done propertly
for(i=1;i<4;i=i+1){
data.push($scope.num[i]);
}
return data;
}())
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
};
if(t==0){
t = t+1;
Highcharts.chart('container',$scope.chartOptions);
}
},function(error){
console.log("in error functio : "+error);
});
},2000);
var cnt = 0;
var str = "str";
setInterval(function(){
str = str+cnt;
cnt++;
$http({
method: "GET",
url : "http://localhost:8080/hello/"+str+"/3"
}).then(function success(data){
}, function error(data){
console.log("error "+data.data);
});
},5000);
var fetchData = function(cnt){
$scope.cnt = $scope.cnt+1;
var deferred = $q.defer();
$http({
method : "GET",
url : "http://localhost:8080/hello"
}).then(function mySuccess(response) {
$scope.myRes = response.data;
$scope.rows = $scope.myRes;
var i;
$scope.num = [];
for(i=0;i<4;i=i+1){
$scope.num.push(++cnt*110);
}
deferred.resolve();
}, function myError(response) {
console.log("error");
$scope.myRes = response;
deferred.reject();
});
return deferred.promise;
};
});
</script>
<body ng-controller="myController">
<hcbar options="chartOptions"></hcbar>
<div id="container"></div>
</body>
</html>
现在我需要加载图表中的条形计数以动态加载，即当计数在数据库中更新时，新值必须反映在图表中（实时数据）
你会看到我已经在我的文件中编写了 data : 函数，它在循环中更新数据数组：
series: [{
name: 'Year 1800',
data: (function(){
var data = [];
var i;
console.log("In Series function() : $scope.num : "+$scope.num ); //Update is being done propertly
for(i=1;i<4;i=i+1){
da.push($scope.num[i]);
}
returndata;
}())
},
更新后的值在控制台中正确打印，但未在图表栏中反映！
我知道有这个函数 addPoint() 可以向数组中添加一个点。但是这里我不想要 series 数组中的新对象，而是 series[0].data 数组中的更新值！
如何做到这一点？
【问题讨论】：
-
不应该
returndata是return data吗？另外，我认为da.push需要是data.push
标签： javascript angularjs highcharts