Я новичок в Angular и Flot, но я испытываю JQuery и Javascript. Я немного смущен о том, как связать карту флота с Angular моделями данных, поскольку Flot является плагином JQuery. Я искал вокруг, но не смог найти пример.
Я также с удовольствием использую highcharts, google-диаграммы или любое другое графическое решение.
Так как диаграммы связаны с тяжелой манипуляцией DOM, директивы - это путь.
Данные могут храниться в контроллере
App.controller('Ctrl', function($scope) {
$scope.data = [[[0, 1], [1, 5], [2, 2]]];
});
И вы можете создать собственный HTML-тег 1, указав модель, которую вы хотите получить из
<chart ng-model='data'></chart>
который angular может скомпилировать по директиве
App.directive('chart', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngModel];
$.plot(elem, data, {});
elem.show();
}
};
});
Этот процесс похож на большинство плагинов, которые изменяют DOM.
- * -
Кроме того, вы можете следить за изменениями в базовых данных диаграммы и перерисовывать их, чтобы таким образом вы могли захватывать данные через службу $http от своего контроллера и автоматически обновлять представление. Это может быть достигнуто путем изменения функции связывания в объекте определения директивы
var chart = null,
opts = { };
scope.$watch(attrs.ngModel, function(v){
if(!chart){
chart = $.plot(elem, v , opts);
elem.show();
}else{
chart.setData(v);
chart.setupGrid();
chart.draw();
}
});
Обратите внимание на использование Flot API в рамках директивы для достижения желаемого.
1 Также может быть атрибутом.
Чтобы использовать плагины jQuery с angularJS, вы должны обернуть их в директивы, вы можете найти некоторые примеры директив плагинов jQuery, прочитав исходный код директив angularUI: https://github.com/angular-ui/angular-ui/tree/master/modules/directives