Skip to main content

jQuery Sparkline and AngularJS

In einem Projekt bei meinem Arbeitgeber hatte ich das jQuery Plugin „Sparkline“ zu verwenden. Da unsere Web-Applikation auf AngularJS basiert, suchte ich nach einer Direktive, um das Sparkline jQuery Plugin in AngularJS zu integrieren. Das gelang aber zu Beginn nur in Firefox und Chrome fehlerfrei, während sowohl IE 10 als auch IE11 mit einem Fehler reklamierten.

Die Integration von Sparkline in AngularJS gelang mittels einer AngularJS-Direktive, welche ich unter http://www.codeandyou.com/2015/02/how-to-show-sparklines-in-angularjs.html gefunden hatte:

// Directive for sparkline jQuery plugin.
// see also: http://www.codeandyou.com/2015/02/how-to-show-sparklines-in-angularjs.html
module.directive('sparklinechart', [function ()
{
	return {
		restrict: "E",
		scope: {
			data: "@"
		},
		compile: function (tElement, tAttrs, transclude)
		{
			tElement.replaceWith("<span>" + tAttrs.data + "</span>");
			return function (scope, element, attrs)
			{
				attrs.$observe("data", function (newValue)
				{
					element.html(newValue);
					element.sparkline('html', {
						type: 'line',
						width: '75%',
						height: '40px',
						lineWidth: 1,
						lineColor: '#ffffff',
						fillColor: 'rgba(255,255,255,0.2)',
						spotRadius: 2,
						spotColor: '#ffffff',
						maxSpotColor: '#ffffff',
						minSpotColor: '#ffffff',
					});
				});
			};
		}
	};
}]);

Dabei trat aber leider im Internet Explorer (IE10 und IE11) folgender Fehler auf:

Error: Invalid argument.
   at interpolateFnWatchAction (http://localhost:59609/Scripts/angular.js:8545:17)
   at interpolateFnWatcher (http://localhost:59609/Scripts/angular.js:11021:17)
   at watchGroupAction (http://localhost:59609/Scripts/angular.js:15387:13)
   at Scope.prototype.$digest (http://localhost:59609/Scripts/angular.js:15715:23)
   at Scope.prototype.$apply (http://localhost:59609/Scripts/angular.js:15986:13)
   at done (http://localhost:59609/Scripts/angular.js:10511:36)
   at completeRequest (http://localhost:59609/Scripts/angular.js:10683:7)
   at requestLoaded (http://localhost:59609/Scripts/angular.js:10624:9)

Oder als Screenshot so:

Die AngularJS Direktive, welche das Sparkline jQuery Plugin hinzufügen soll, wirft diesen Fehler.
Die AngularJS Direktive, welche das Sparkline jQuery Plugin hinzufügen soll, wirft diesen Fehler.

Eine erste Recherche und das Versuchen von verschiedenen Änderungen brachte keinen Erfolg. Es war aber rasch klar, dass der Fehler in der Funktion auftritt, welche dem $observe-Attribute in der compile-Funktion der Direktive übergeben wurde. Erst nach einer weiteren Suche im Internet stiess ich unter https://github.com/angular/angular.js/issues/8659 auf die Lösung des Problems. In der erwähnten Funktion muss die Zeile 15 durch folgendes ersetzt werden:

element.empty().append(newValue);

Mit dieser Änderung funktioniert das Einbinden des Sparkline jQuery Plugins nun einwandfrei.

Der Vollständigkeit halber sei hier nochmals der gesamte korrekte Code aufgeführt:

// Directive for sparkline jQuery plugin.
// see also: http://www.codeandyou.com/2015/02/how-to-show-sparklines-in-angularjs.html
module.directive('sparklinechart', [function ()
{
	return {
		restrict: "E",
		scope: {
			data: "@"
		},
		compile: function (tElement, tAttrs, transclude)
		{
			tElement.replaceWith("<span>" + tAttrs.data + "</span>");
			return function (scope, element, attrs)
			{
				attrs.$observe("data", function (newValue)
				{
					element.empty().append(newValue);
					element.sparkline('html', {
						type: 'line',
						width: '75%',
						height: '40px',
						lineWidth: 1,
						lineColor: '#ffffff',
						fillColor: 'rgba(255,255,255,0.2)',
						spotRadius: 2,
						spotColor: '#ffffff',
						maxSpotColor: '#ffffff',
						minSpotColor: '#ffffff',
					});
				});
			};
		}
	};
}]);

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.