Sto utilizzando un plug-in per grafici (Morris.js) nella mia applicazione AngularJS. Sto costruendo una direttiva per ogni tipo di grafico.
Il plugin è chiamato così:
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
Il primo passo è solo includere questo codice nella mia funzione link :
angular.module('app')
.directive('donutchart', function () {
return {
link: function (scope, element, attrs) {
new Morris.Bar({
element: element[0].id,
data: [
{ Age: '20', value: 20 },
{ Age: '25', value: 10 },
{ Age: '30', value: 5 },
{ Age: '40', value: 5 },
{ Age: '50', value: 20 }
],
xkey: 'Age',
ykeys: ['Amount'],
labels: ['views']
});
}
};
});
Ma non mi piace che manipoli la direttiva quando voglio cambiare i dati. Quindi salvi tutti gli attributi all'interno dell'ambito all'interno del controller.
Ma è questo il modo "giusto" per farlo? O dovrei usare una variabile di configurazione per memorizzare un attributo molto? Come:
var CONFIG = { bar_labels: ['views'] }
e quindi all'interno del controller:
$scope.bar_labels = bar_labels