1
Ich versuche eine Anweisung für HighCharts in AngularJS zu schreiben, die eine Zwei-Wege-Datenbindung unterstützt. Beim Klicken auf eine Funktion im HTML versuche ich den Graphen mit neuen Daten zu laden.Zwei-Wege-Datenbindung in Angular JS für Graphen, die mit HighCharts implementiert werden
Bitte überprüfen Sie die folgenden Snipet.
HTML:
<hc-area-chart data="areaData"></hc-area-chart>
<button ng-click="updateGraph()">Update function</button>
Controller:
angular.module('myModule', [])
.directive('hcAreaChart', function() {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '@',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'area'
},
title: {
text: null
},
xAxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
},
plotOptions: {
pointStart: 4,
},
series: [{
showInLegend: false,
data: scope.data
}]
});
}
};
})
.controller('myController', function ($scope) {
$scope.areaData = [0,6,5,7,5,4.5,10];
$scope.updateGraphData = function() {
console.log("inside update function");
$scope.areaData = [10,20,30,40,50,60,70];
}
});
Works versuchen sollte !!! Danke vielmals – LS2