0
學習AngularJS和HighCharts。我想了解如何從JSON對象中獲取數據並動態更新x軸上的值和條形圖值。我希望瞭解如何從JSON對象獲取數據並動態更新x軸上的值和條形圖值。 Y軸值是恆定的。 現在我已經硬編碼了這些值，我想要後端的x軸和條形圖值。從Json對象渲染AngularJS中的HighCharts對象
這是我曾嘗試 -
(function() {
'use strict';
angular.module('myModule', [])
// Directive for generic chart, pass in chart options
.directive('hcChart', function() {
return {
restrict: 'E',
template: '<div></div>',
scope: {
options: '='
},
link: function(scope, element) {
Highcharts.chart(element[0], scope.options);
}
};
})
.controller('MainCtrl', function($scope, $http) {
$scope.chartData = [];
$scope.totalCostList = [];
loadChartData();
function loadChartData() {
var httpRequest = $http({
method: 'GET',
url: './example.json'
}).then(function(response) {
console.log(response.data);
$scope.chartData = response.data;
console.log("length:" + $scope.chartData.activityResponse.length);
for (var i = 0; i < $scope.chartData.activityResponse.length; i++) {
$scope.totalCostList.push(parseInt($scope.chartData.activityResponse[i].totalCost));
}
console.log($scope.totalCostList);
});
}
//var chartData = $scope.totalCostList;
var yAxisLabels = [1, 5000, 10000, 15000, 20000];
var chartData = [
10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
10000, 5000
];
var dateLine = Date.UTC(2015, 0, 1);
Highcharts.getOptions().colors[0] = {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#6EB7D8'],
[0.4, '#2989D8'],
[0.7, '#207cca'],
[1, '#1E5799']
]
};
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
//To give the chart a bounce effect
Math.easeOutBounce = function(pos) {
if ((pos) < (1/2.75)) {
return (7.5625 * pos * pos);
}
if (pos < (2/2.75)) {
return (7.5625 * (pos -= (1.5/2.75)) * pos + 0.75);
}
if (pos < (2.5/2.75)) {
return (7.5625 * (pos -= (2.25/2.75)) * pos + 0.9375);
}
return (7.5625 * (pos -= (2.625/2.75)) * pos + 0.984375);
};
$scope.chartOptions = {
chart: {
type: 'column',
margin: [70, 30, 30, 80]
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: 'Weekly Inventory at Cost',
style: {
color: '#333'
},
align: 'left',
x: 10,
y: 20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b'
},
lineColor: '#333',
tickColor: '#333',
crosshair: true,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
tickmarkPlacement: 'on',
labels: {
align: 'left',
rotation: 0
}
},
yAxis: {
crosshair: true,
lineColor: '#333',
tickColor: '#333',
tickPositioner: function() {
return yAxisLabels;
},
labels: {
format: '{value:,.0f}'
},
title: {
enabled: false
},
lineWidth: 1,
tickWidth: 1,
id: 'cost',
gridLineWidth: 0,
min: 1
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0,
pointPlacement: 'between'
}
},
shadow: true,
series: [{
data: chartData,
pointStart: dateLine,
pointInterval: 7 * 24 * 3600 * 1000 // 7days
}]
};
});
})();<!DOCTYPE html>
<html ng-app="myModule">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<hc-chart options="chartOptions" style="width: 96%; height: 300px;">Placeholder for generic chart</hc-chart>
</body>
</html>我的例子JSON - { 「消息」： 「成功」， 「狀態」： 「OK」， 「activityResponse 「：[{ 」storeNo「： 」00208「， 」WK「： 」1「， 」年「： 」2016「， 」TOTALCOST「： 」349622.9「 }，{ 」 S託雷諾 「： 」00208「， 」WK「： 」2「， 」年「： 」2016「， 」TOTALCOST「： 」2000「 }， { 」storeNo「： 」00208「， 」 WK 「： 「3」， 「年」： 「2016」， 「TOTALCOST」： 「15000」 }] }
如何使用[highcharts-ng]（https://github.com/pablojim/highcharts-ng）允許以簡單的方式更新數據？ http://jsfiddle.net/pablojim/7cAq3/ –
@ SebastianBochan，我不想點擊數據。它應該由REST端點動態地更新。現在，我只是使用一個模擬的JSON文件來實現這個功能。 –