Ihr erstellt gerade eine Anwendung, in der ihr ein Linien-, Balken-, Säulen oder Kreisdiagramm benötigt? Dann seid ihr bestimmt schon auf die JavaScript-Bibliothek D3.js von Mike Bostock gestoßen. Mit D3 könnt ihr diese Art von Diagrammen auf eine sehr elegante Weise erstellen. Außerdem wird die Bibliothek kontinuierlich verbessert und liefert fast 200 Beispiele mit. Natürlich gibt es auch Bücher und eine Menge Artikel dazu.
Obwohl D3 schon sehr gut zu benutzen ist, geht es im Zusammenspiel mit AngularJS noch einfacher. Dazu bietet sich das Projekt angularjs-nvd3-directives an. Dieses Projekt kapselt eine Menge der Visualisierungen als AngularJS-Direktiven.
Aktuell hat nvd3 folgende Direktiven:
- nvd3LineChart
- nvd3CumulativeLineChart
- nvd3StackedAreaChart
- nvd3MultiBarChart
- nvd3DiscreteBarChart
- nvd3HistoricalBarChart
- nvd3MultiBarHorizontalChart
- nvd3PieChart
- nvd3ScatterChart
- nvd3ScatterPlusLineChart
- nvd3LinePlusBarChart
- nvd3LineWithFocusChart
- nvd3BulletChart
- nvd3SparklineChart
- nvd3SparklineWithBandlinesChart
Ein Beispiel
Wir nehmen als Beispiel ein einfaches Liniendiagram. Die Daten werden in einem mehrdimensionalen Array abgelegt:
values: [[ 1025409600000 , 0], [ 1028088000000 , -6.3382185140371] ... ]Dieses könnt ihr dann mit der Direktive nvd3-line-chart ausgeben.
Code
💡 Keine Lust zu lesen?
Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.
Mehr Informationen zur Angular-Schulung
application.js
angular.module("nvd3TestApp", ['nvd3ChartDirectives'])
.controller('MainCtrl', function ($scope) {
$scope.data = [
{
key: "Series 1",
values: [[ 1025409600000 , 0], [ 1028088000000 , -6.3382185140371] ... ]
}
];
$scope.xAxisTickFormat = function () {
return function (d) {
return d3.time.format('%x')(new Date(d));
}
};
$scope.yAxisTickFormat = function () {
return function (d) {
return Math.round(d,10);
}
};
});index.html
<html ng-app="nvd3TestApp">
<head>
<script src="d3.js"></script>
<script src="nv.d3.js"></script>
<script src="angular.js"></script>
<script src="angularjs-nvd3-directives.js"></script>
<script src="application.js"></script>
<link rel="stylesheet" href="nv.d3.css" />
</head>
<body ng-controller="MainCtrl">
<nvd3-line-chart
data="data"
id="exampleId"
xAxisTickFormat="xAxisTickFormat()"
yAxisTickFormat="yAxisTickFormat()"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
>
</nvd3-line-chart>
</body>
</html>💡 Hat dir das Tutorial geholfen?
Wir bieten auch Angular-Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst Du die Fragen stellen, die Du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie Dir beantworten.
Jetzt weiter lernenWeitere Diagramm-Beispiele findet ihr in der Projektdokumentation.
Viel Spaß beim Ausprobieren!
Robin Böhm
Gründer von Angular.DE
Entwickler, Trainer und Buch-Autor
Robin beschäftigt sich seit 2012 intensiv mit der Erstellung client-seitiger Web-Applikationen. 2014 hat er das erste deutschsprachige Buch zum Thema AngularJS geschrieben und ist Mitgründer der Platform Angular.DE. Mit seinem Schulungs-Team hat er bereits über 1200 Unternehmen den erfolgreichen Start mit Angular ermöglicht.
Weitere Artikel
Was sind Angular und AngularJS?
Was sind die Unterschiede zwischen Angular und AngularJS?
Migration AngularJS zu Angular
Migration mit ngUpgrade leichtgemacht. Eine Zusammenfassung über alle wichtigen Schritte, wie ihr eure AngularJS App zu einer Angular App migrieren könnt.
Migration AngularJS zu Angular [Video]
Angular Version >2.x kommt … und es macht alles anders! Ist das wirklich so? Was hat das für meine Anwendung zu bedeuten? Mehr darüber in diesem Artikel!
