使用 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>
现在我需要在图表中加载要动态加载的条形数，就像在数据库中更新计数一样，新值必须反映在图表中 (Real Time Data)
你会看到我在我的文件中写了 data : function ，它在循环中更新了数据数组：
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;
}())
},
更新的值在控制台中正确打印但是 NOT BEING REFLECTED IN THE CHART BAR!
我知道有一个函数 addPoint() ，它为数组添加了一个点 . 但是在这里我不希望 series 数组中的新对象，而是 series[0].data 数组中的更新值！
如何实现这一目标？
1 回答
如果您将值放在 $scope 中并使用如下所示 .
当你更新 $scope.num1 时，它肯定会在图表中显示 update .
这是 WORKING 示例 .