0
Lernen AngularJS und HighCharts. [Plunker Link] [1]Rendering HighCharts in AngularJS von JSON Objekt
Ich würde gerne verstehen, wie ich die Daten von einem JSON-Objekt erhalten und dynamisch die Werte auf der X-Achse und dem Balkendiagrammwert aktualisieren kann. Die Werte der Y-Achse sind konstant. Momentan habe ich die Werte hart codiert, ich möchte die Werte der X-Achse und des Balkendiagramms vom Backend. Hier
ist, was ich versucht habe -
(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>Mein Beispiel JSON - { "message": "Erfolg", "Status": "OK", „activityResponse ": [{ "storeNo": "00208", "Wo": "1", "Jahr": "2016", "Totalcost": "349.622,9" }, { " s toreno ": "00208", "Wo": "2", "Jahr": "2016", "Totalcost": "2000" }, { "storeNo": "00208", " wk „: "3", "Jahr": "2016", "Totalcost": "15000" }] }
Wie wäre es mit dem [Highchart-ng] (https://github.com/pablojim/highcharts-ng), die Daten auf einfache Weise zu aktualisieren? http://jsfiddle.net/pablojim/7cAq3/ –
@SebastianBochan, ich möchte nicht die Daten auf klicken. Es sollte dynamisch vom REST-Endpunkt aktualisiert werden. Im Moment verwende ich nur eine JSON-Mock-Datei, um diese Funktionalität zu erreichen. –