0
Ich brauche ein Flächendiagramm mit der Verwendung von Angular Direktive und Daten aus der Datenbank abgerufen wird, aber das Problem ist nach dem Abrufen der Daten, Diagramm wird nicht angezeigt, und wenn ich statische Daten verwenden Diagramm erscheint fein.und Diagramm würde nach 10 Sekunden aktualisieren, das ist meine Anforderung.Morris Chart mit eckigen und dynamischen Daten
var myapp=angular.module('myapp',['ngRoute']);
myapp.controller('GraphController',
function(dataFactory,$scope,$http,$timeout){
var getData=function() {
dataFactory.httpRequest('/graph').then(function (data) {
console.log(JSON.stringify(data));
$scope.myModel=JSON.stringify(data);
$timeout(getData, 1000);
});
}
$scope.xkey = 'id';
$scope.ykeys = ['id', 'value'];
$scope.labels = ['ID', 'Value'];
$timeout(getData, 1000);
/* Static data and when these static data are use in getData function ,it didnot work.
$scope.myModel = [
{"id":21,"yr":2000,"value":80},
{"id":1,"yr":2001,"value":5},
{"id":2,"yr":2002,"value":6},
{"id":3,"yr":2003,"value":17},
{"id":4,"yr":2004,"value":5},
{"id":5,"yr":2005,"value":22},{"id":7,"yr":2006,"value":41},
{"id":9,"yr":2007,"value":11},{"id":10,"yr":2008,"value":33},
{"id":8,"yr":2009,"value":77},{"id":6,"yr":2010,"value":55},
{"id":11,"yr":2011,"value":55},{"id":12,"yr":2012,"value":66},
{"id":13,"yr":2013,"value":77},{"id":14,"yr":2014,"value":50},
{"id":15,"yr":2015,"value":22},{"id":16,"yr":2016,"value":77},
{"id":17,"yr":2017,"value":41},{"id":18,"yr":2018,"value":20},
{"id":19,"yr":2019,"value":9},{"id":20,"yr":2020,"value":2},
{"id":23,"yr":2022,"value":1}
];*/
});
myapp.directive('areachart',function(){ //directive name must be in small letters
return {
// required to make it work as an element
restrict: 'E',
template: '<div></div>',
replace: true,
link:function($scope,element,attrs)
{
var data=$scope[attrs.data],
xkey=$scope[attrs.xkey],
ykeys=$scope[attrs.ykeys],
labels=$scope[attrs.labels];
Morris.Area({
element:element,//element means id #
data:data,
xkey:xkey,
ykeys:ykeys,
labels:labels,
parseTime: false,
ymax:120,//Max. bound for Y-values
lineColors: ['#0b62a4', '#D58665'],//Array containing colors for the series lines/points.
smooth: true,//Set to false to disable line smoothing.
hideHover: 'auto',//Set to false to always show a hover legend.
pointSize: 4,//Diameter of the series points, in pixels.s
axes:true,//Set to false to disable drawing the x and y axes.
resize: true,//Set to true to enable automatic resizing when the containing element resizes
fillOpacity:1.0,//Change the opacity of the area fill colour. Accepts values between 0.0 (for completely transparent) and 1.0 (for completely opaque).
grid:true,//Set to false to disable drawing the horizontal grid lines.
});
}
}
})
HTML-Seite
<body ng-app="myapp">
<div ng-controller="GraphController">
<AreaChart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></AreaChart>
</div>
</body>
Und kein Problem in der Daten Fabrik file.Response von HTTP-Request arbeitet und Antwortformat ist [Objekt, Objekt, usw. ] und nach dem JSON.stringify (data) -Funktionsformat der Daten: [ {"id": 21, "yr": 2000, "value": 80}, {"id": 1, "yr": 2001 , "Wert": 5}, {"id": 2, "Jahr": 2002, "Wert": 6}, {"id": 3, "yr": 2003, "Wert": 17}, usw.]; – User101