In diesem Artikel möchte ich die Flexibilität und die wahre Stärke von amCharts 4 demonstrieren. Wir lernen, wie man mehrere Diagramme kombiniert, die zusammen mit Animationen laufen und ein Filmerlebnis bilden. Selbst wenn Sie nur daran interessiert sind, eine andere Art von Animation zu erstellen, die nichts mit Diagrammen zu tun hat, können Sie diese Bibliothek trotzdem verwenden, da sie mehr kann als nur Diagramme erstellen. Der Kern von amCharts wurde entwickelt, um bei allem rund um SVG zu helfen: Erstellung, Layout, Animation – im Grunde eine Bibliothek, die die Arbeit mit SVG zum Vergnügen macht!
Hier ist die Art von Sache, die ich meine. Es ist tatsächlich eine Demonstration von sieben verschiedenen Diagrammen, die zusammen animiert werden. Wir werden das gemeinsam durchgehen, abdecken, wie es funktioniert und wie man es nachbildet, damit Sie amCharts beim nächsten Mal, wenn Sie mit Diagrammen oder komplexen Animationen arbeiten, in Ihrem Werkzeugkasten haben.
Siehe den Pen React Hook: setEffect Beispiel von amCharts Team (@amcharts) auf CodePen.
Lassen Sie uns zuerst die Phasen des Films skizzieren
In dem Film passiert viel. Teilen wir ihn in verdauliche Teile auf, die es uns ermöglichen, zu verstehen, was vor sich geht, und diese Teile im Hintergrund nachzubilden.
Hier ist die Essenz dessen, womit wir es zu tun haben
- Die anfänglichen Animationen und Zustände
- Das Tortendiagramm erscheint
- Das Tortendiagramm verwandelt sich in ein Land
- Das Flugzeug fliegt in ein anderes Land
- Das Flugzeug wird groß und fliegt davon
- Das Säulendiagramm erscheint und biegt sich zu einem Radardiagramm
Die anfänglichen Animationen und Zustände
Als Erstes sehen wir ein Tortendiagramm, das aus der Tiefe aufsteigt, umgeben von einer geschwungenen Linie. Das Tortendiagramm selbst ist zu diesem Zeitpunkt nichts Besonderes, aber wir werden es im nächsten Abschnitt behandeln.
Aber was ist mit dieser geschwungenen Linie? Denken Sie daran, wir erstellen Diagramme, also ist diese Linie einfach ein XY-Diagramm mit einer einzigen Linie darauf. Alle anderen Details – Gitter, Beschriftungen, Markierungen usw. – sind ausgeblendet. Was wir also wirklich sehen, ist ein stark reduziertes Liniendiagramm!
Einrichtung der Linien- und Tortendiagramm-Animationen
amCharts nennt die Linien in diesem Diagramm eine Linienreihe. Eine Linienreihe hat eine Variable namens tensionX, die in diesem Fall auf 0,75 gesetzt ist, was zu einer geschwungenen Linie führt. Wir müssen die Spannung wie bei einem Seil betrachten, das von zwei Personen und an beiden Enden gehalten wird: Je fester das Seil gezogen wird, desto größer ist die Spannung; umgekehrt wird die Spannung lockerer, wenn die beiden Enden nachlassen. Dieser Wert von 0,75 zieht ein Viertel einer Einheit vom Anfangswert (1) ab und erzeugt weniger Spannung.
// Creates the line on the chart
var lineSeries = lineChart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.dateX = "date";
lineSeries.dataFields.valueY = "value";
lineSeries.sequencedInterpolation = true;
lineSeries.fillOpacity = 0.3;
lineSeries.strokeOpacity = 0;
lineSeries.tensionX = 0.75; Loosens the tension to create a curved line
lineSeries.fill = am4core.color("#222a3f");
lineSeries.fillOpacity = 1;Anfänglich sind alle Werte der Reihe gleich: eine flache Linie. Dann setzen wir den valueY-Wert der Animation der Linie auf 80, was bedeutet, dass sie sich zur achten Reihe der Diagrammhöhe erhebt – das lässt viel Platz für das Tortendiagramm, wenn es erscheint.
// Defines the animation that reveals the curved line
lineSeries.events.on("shown", function(){
setTimeout(showCurve, 2000)
});
// Sets the animation properties and the valueY so the line bounces up to
// 80 on the chart's y-axis
function showCurve() {
lineSeries.interpolationEasing = am4core.ease.elasticOut;
lineSeries.dataItems.getIndex(3).setValue("valueY", 80, 2000);
setTimeout(hideCurve, 2000);
}
// This is the initial state where the line starts at 30 on the y-axis
// before it pops up to 80
function hideCurve() {
lineSeries.interpolationEasing = am4core.ease.elasticOut;
lineSeries.dataItems.getIndex(3).setValue("valueY", 30, 2000);
setTimeout(showCurve, 2000);
}Hier ist das Liniendiagramm allein, damit wir eine bessere visuelle Vorstellung davon haben, wie es aussieht
Siehe den Pen Zerlegung des amCharts-Films, Phase 1 von amCharts Team (@amcharts) auf CodePen.
Als Nächstes erscheint das Tortendiagramm von unten. Wie eine Linienreihe enthält amCharts auch eine Tortenreihe, die eine Eigenschaft dy hat, die wir mit einem Zustand von 400 auf versteckt setzen können.
// Make the circle to show initially, meaning it will animate its properties from hidden state to default state
circle.showOnInit = true;
// Set the circle's easing and the duration of the pop up animation
circle.defaultState.transitionEasing = am4core.ease.elasticOut;
circle.defaultState.transitionDuration = 2500;
// Make it appear from bottom by setting dy of hidden state to 300;
circle.hiddenState.properties.dy = 300;Um dieses Konzept zu veranschaulichen, hier eine Demo mit diesem einfachen Kreis anstelle eines Tortendiagramms
Siehe den Pen Zerlegung des amCharts-Films, anfängliche Animation von amCharts Team (@amcharts) auf CodePen.
Ein kurzer Überblick über amChart-Zustände
Die Idee von Zuständen in amCharts ist folgende: Sie können beliebige benutzerdefinierte Zustände auf jedem Sprite haben. Anstatt dann mehrere Animationen mit einer Vielzahl von verschiedenen Eigenschaften zu erstellen, wird der Zustand von einem zum anderen geändert und alle erforderlichen Eigenschaften, die für den Zielzustand festgelegt sind, werden von den aktuellen Werten zu den neuen Zustandswerten animiert.
Jede numerische, prozentuale oder farbige Eigenschaft eines Sprites kann animiert werden. Standardmäßig sind für Sprites versteckte und Standardzustände integriert. Der versteckte Zustand wird anfänglich angewendet, gefolgt vom angezeigten Zustand, der der Standard ist. Es gibt natürlich noch weitere Zustände, wie Hover, Aktiv, Deaktiviert, und andere, einschließlich benutzerdefinierter Zustände. Hier ist eine weitere Demo, die ein Kreisdiagramm mit animiertem innerRadius, radius und fill beim Hovern zeigt
Siehe den Pen Zerlegung des amCharts-Films, Verstehen von Zuständen von amCharts Team (@amcharts) auf CodePen.
Das Tortendiagramm erscheint
Hier ist eine Demo eines einfachen Tortendiagramms. Nach einiger Zeit blenden wir alle Segmente außer einem aus und zeigen sie dann wieder alle an.
Siehe den Pen Zerlegung des amCharts-Films, Tortendiagramm von amCharts Team (@amcharts) auf CodePen.
Wenn Sie sich den Code in der Demo ansehen, werden Sie sehen, dass einige Eigenschaften der Segmente über pieSeries.slices.template oder pieSeries.labels.template angepasst werden. Die meisten Anpassungen können natürlich mit Themes vorgenommen werden (amCharts 4 unterstützt die Verwendung mehrerer Themes gleichzeitig), aber da wir nur wenige Eigenschaften ändern müssen, können wir eine Vorlage verwenden. Wir verwenden einen Tortendiagrammtyp und alle Segmente der Tortenreihe werden mithilfe der bereitgestellten Vorlage erstellt, die alle geerbten Eigenschaften, die wir aus der Vorlage verwenden, auf unser Tortendiagramm überträgt.
// Call included themes for styling and animating
am4core.useTheme(am4themes_amchartsdark);
am4core.useTheme(am4themes_animated);
// ...
// Call the Pie Chart template
var pieChart = mainContainer.createChild(am4charts.PieChart);Was ist, wenn Sie eine benutzerdefinierte Farbe für die Schriftart des Diagramms festlegen möchten? Das können wir tun, indem wir ein Feld in den Daten hinzufügen, z. B. fontColor. Dies ermöglicht es uns, dort benutzerdefinierte Farben festzulegen und dann der Label-Vorlage mitzuteilen, dass sie das Feld verwenden soll, um den Wert der color-Eigenschaft zu bestimmen.
// Define custom values that override one provided by the template
pieChart.data = [{
"name": "[bold]No[/]",
"fontColor": am4core.color("#222a3f"),
"value": 220,
"tickDisabled":true
}, {
"name": "Hm... I don't think so.",
"radius":20,
"value": 300,
"tickDisabled":false
}, {
"name": "Yes, we are using amCharts",
"value": 100,
"labelDisabled": true,
"tickDisabled":true
}];Jede Eigenschaft eines Sprites kann auf diese Weise angepasst werden. Und sogar später, nachdem das Diagramm initialisiert wurde, können wir jede Eigenschaft über die Vorlage ändern, oder wenn wir auf ein einzelnes Objekt zugreifen müssen, können wir jeden Wert mit etwas wie series.slices.getIndex(3) abrufen, um es zu isolieren.
Zusammenfassend lässt sich sagen: Es gibt kein einzelnes Objekt im Diagramm, das nicht angepasst oder zugegriffen, geändert werden kann, selbst nachdem das Diagramm erstellt wurde. Wir arbeiten mit viel Flexibilität!
Das Tortendiagramm verwandelt sich in ein Land
Ich sage es offen: Es gibt keine Möglichkeit, ein ganzes Tortendiagramm oder ein anderes komplexes Objekt in die Form eines Landes zu verwandeln. In amCharts 4 kann ein Polygon in ein anderes morphiert werden. Und es gibt vorgefertigte Methoden, die ein Polygon einfach in einen Kreis oder ein Rechteck morphieren. Hier ist, was wir tun werden
- Zuerst blenden wir alle Segmente eines Tortendiagramms aus, bis auf eines. Dadurch wird das verbleibende Segment effektiv in einen Kreis verwandelt.
- Dann animieren wir die Eigenschaft
innerRadiusauf 0, und das Segment wird zu einem echten Kreis. - Zu diesem Zeitpunkt gibt es bereits ein Karten-Diagramm, aber es ist außer Sichtweite verborgen. Während es sich versteckt, zoomen wir in ein ausgewähltes Land und morphieren es ebenfalls zu einem Kreis.
- Als Nächstes zeigen wir das Land (das jetzt ein Kreis ist) und blenden das Tortendiagramm aus (das zu diesem Zeitpunkt wie derselbe Kreis aussieht).
- Schließlich morphieren wir das Land zurück in seine ursprüngliche Form.
Hier ist eine vereinfachte Demo, bei der wir in das Land hineinzoomen, es zu einem Kreis morphieren und es dann zurück in seinen Standardzustand morphieren
Siehe den Pen Zerlegung des amCharts-Films, Morphing von amCharts Team (@amcharts) auf CodePen.
Untersuchen Sie diesen Code. Beachten Sie, dass alle von uns aufgerufenen Methoden, wie zoomToMapObject, morphToCircle oder morphBack, ein Animations-Objekt zurückgeben. Ein Animations-Objekt löst Ereignisse wie animationstarted, animationprogress oder animationended aus, und wir können Listener an sie anhängen. Dies stellt sicher, dass eine Animation erst ausgelöst wird, nachdem eine andere abgeschlossen ist. Und wenn wir die Dauer einer Animation ändern, müssen wir keine Timer entsprechend anpassen, da Ereignisse dies handhaben werden. In amCharts 4 haben Sprites, Komponenten, DataItems, Animationen und andere Objekte ein Ereignisverteiler-Objekt, das alle Ereignisse regelt. Sie können Listener für diese Ereignisse hinzufügen und sie verwenden, um Ihre Anwendungen super interaktiv zu gestalten.
Das Flugzeug fliegt von einem Land in ein anderes
An einem Punkt taucht ein Flugzeug in London auf einem Karten-Diagramm auf und reist bis nach Silicon Valley.
Es mag komplex und beängstigend aussehen, aber es verwendet viele der Konzepte, die wir bereits behandelt haben, und die Funktionen sind standardmäßig im Karten-Diagramm von amCharts enthalten.
MapImageSerieswird erstellt und Sprites (Kreise und Beschriftungen) werden den tatsächlichen Längen- und Breitengradkoordinaten beider Städte zugeordnet.
// Create first image container
var imageSeries = mapChart.series.push(new am4maps.MapImageSeries());
// London properties
var city1 = imageSeries.mapImages.create();
// London's latitude/longitude
city1.latitude = 51.5074;
city1.longitude = 0.1278;
// prevent from scaling when zoomed
city1.nonScaling = true;
// New York City properties
var city2 = imageSeries.mapImages.create();
// NY latitude/longitude
city2.latitude = 40.7128;
city2.longitude = -74.0060;
// Prevent scaling when zoomed
city2.nonScaling = true;MapLineSerieserstellt, ähnlich wie die standardmäßige Linienreihe, die wir zuvor gesehen haben, eine Linie zwischen den Städten basierend auf den bereitgestellten Koordinaten, die von einem Kartenbild zum anderen verläuft. Standardmäßig wird die Linie so gezeichnet, dass sie dem kürzesten Weg zwischen den Objekten folgt. Das ist in diesem Fall eine geschwungene Linie. Wir könnten sie auch zu einer geraden Linie machen.
// Create the map line series
var lineSeries = mapChart.series.push(new am4maps.MapLineSeries());
var mapLine = lineSeries.mapLines.create();
// Tell the line to connect the two cities (latitudes/longitudes an be used alternatively)
mapLine.imagesToConnect = [city1, city2]
// Draw the line in dashes
mapLine.line.strokeDasharray = "1,1";
mapLine.line.strokeOpacity = 0.2;- Ein Objekt (Flugzeug) wird zur
MapLinehinzugefügt und bewegt sich zwischen den Endpunkten der Linie, indem die Eigenschaftpositiondes Flugzeugs von 0 auf 1 animiert wird.
// Create the plane container
var planeContainer = mapLine.lineObjects.create();
planeContainer.position = 0;
// Set the SVG path of a plane for the sprite
var plane = planeContainer.createChild(am4core.Sprite);
planeContainer.nonScaling = false;
planeContainer.scale = 0.015;
// SVG plane illustration
plane.path = "M71,515.3l-33,72.5c-0.9,2.1,0.6,4.4,2.9,4.4l19.7,0c2.8,0,5.4-1,7.5-2.9l54.1-39.9c2.4-2.2,5.4-3.4,8.6-3.4 l103.9,0c1.8,0,3,1.8,2.3,3.5l-64.5,153.7c-0.7,1.6,0.5,3.3,2.2,3.3l40.5,0c2.9,0,5.7-1.3,7.5-3.6L338.4,554c3.9-5,9.9-8,16.2-8c24.2,0,85.5-0.1,109.1-0.2c21.4-0.1,41-6.3,59-17.8c4.2-2.6,7.9-6.1,11.2-9.8c2.6-2.9,3.8-5.7,3.7-8.5c0.1-2.8-1.1-5.5-3.7-8.5c-3.3-3.7-7-7.2-11.2-9.8c-18-11.5-37.6-17.7-59-17.8c-23.6-0.1-84.9-0.2-109.1-0.2c-6.4,0-12.3-2.9-16.2-8L222.6,316.6c-1.8-2.3-4.5-3.6-7.5-3.6l-40.5,0c-1.7,0-2.9,1.7-2.2,3.3L237,470c0.7,1.7-0.5,3.5-2.3,3.5l-103.9,0c-3.2,0-6.2-1.2-8.6-3.4l-54.1-39.9c-2.1-1.9-4.7-2.9-7.5-2.9l-19.7,0c-2.3,0-3.8,2.4-2.9,4.4l33,72.5C72.6,507.7,72.6,511.8,71,515.3z";
plane.fill = am4core.color("#eeeab5");
plane.horizontalCenter = "middle";
plane.verticalCenter = "middle";Hier ist eine Demo eines Flugzeugs, das von London nach New York fliegt
Siehe den Pen Zerlegung des amCharts-Films, Kartenteil von amCharts Team (@amcharts) auf CodePen.
Bemerken Sie, dass das Flugzeug größer wird, wenn es den Mittelpunkt der Linie erreicht? Das wird mit drei zusätzlichen Codezeilen erreicht, die wir am Ende einfügen können.
// Make the plane to be bigger in the middle of the line
planeContainer.adapter.add("scale", function(scale, target) {
return (0.07 - 0.10 * (Math.abs(0.5 - target.position))) / mapChart.zoomLevel;
})Wir verwenden eine Methode, die als Adapter bezeichnet wird, eine weitere Super-mächtige Funktion von amCharts 4. In diesem Fall modifiziert der Adapter die Eigenschaft scale (von 0,07 auf 0,10) basierend auf der Position des Flugzeugs (0,5).
Das Flugzeug wird groß und fliegt davon
Wenn unser Flugzeug die Zielstadt erreicht (Silicon Valley im vollständigen Film), skalieren und rotieren wir es so, dass es horizontal und groß wird.
Gleichzeitig erstellen wir ein weiteres Diagramm (den SlicedChart-Typ) und fügen ihm eine PictorialSeries hinzu. Die Reihe teilt sich den gleichen Pfad wie das Flugzeug, was eine Maske für die Segmente erzeugt. Wir können hier jeden SVG-Pfad verwenden.
Wenn die Segmente angezeigt werden, möchten wir, dass das Flugzeug davonfliegt
Dies geschieht durch Animation der Eigenschaft dx des Diagramm-Objekts.
flyAway()
function flyAway(){
var animation = pictorialChart.animate({property:"dx", to:2000}, 1500, am4core.ease.quadIn).delay(2000);
animation.events.on("animationended", flyIn);
}
function flyIn(){
var animation = pictorialChart.animate({property:"dx", from:-2000, to:0}, 1500, am4core.ease.quadOut);
animation.events.on("animationended", flyAway);
}Hier ist eine Demo eines gestückelten Diagramms
Siehe den Pen Zerlegung des amCharts-Films, Pictorial Series von amCharts Team (@amcharts) auf CodePen.
Die Spur eines Flugzeugs wird wieder mit einer Linienreihe erstellt, ähnlich der, die wir am Anfang hatten. Diesmal ist es eine Kombination aus zwei separaten Reihen: eine mit positiven und eine mit negativen Werten. Wenn eine Reihe die Eigenschaft sequencedInterpolation auf true gesetzt hat, erfolgt die Animation mit einer gewissen Verzögerung für jeden Datenwert, und wir erhalten einen Effekt wie diesen
Siehe den Pen Zerlegung des amCharts-Films, Flugzeugspur von amCharts Team (@amcharts) auf CodePen.
var series1 = chart.series.push(new am4charts.LineSeries())
series1.dataFields.dateX = "date";
series1.dataFields.valueY = "value1";
series1.sequencedInterpolation = true;
series1.fillOpacity = 1;
series1.tensionX = 0.8;
series1.stroke = am4core.color("#222a3f")
series1.fill = am4core.color("#222a3f")Dann gibt es die Silhouette einer Stadtlandschaft, die sich horizontal scrollt, während das Flugzeug vorbeizieht
Siehe den Pen Zerlegung des amCharts-Films, vorbeifliegende Stadt von amCharts Team (@amcharts) auf CodePen.
Dies verwendet das gleiche Diagramm wie die Flugzeugspur. Wir fügen dem Diagramm im Grunde eine weitere Wertachse hinzu und erstellen eine Säulenreihe
// Add a new axis to the chart
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// ... shortened for brevity
// Configure the column series
var series = chart.series.push(new am4charts.ColumnSeries())
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.sequencedInterpolation = true;
series.fillOpacity = 1;
series.fill = am4core.color("#222a3f");
series.stroke = am4core.color("#222a3f")
// Establish the columns at full width
series.columns.template.width = am4core.percent(100);Dann aktualisieren wir den Hintergrund zu einem Gradienten
chart.background.fillOpacity = 0.2;
var gradient = new am4core.LinearGradient();
gradient.addColor(am4core.color("#222a3f"));
gradient.addColor(am4core.color("#0975da"));
gradient.rotation = -90;
chart.background.fill = gradient;Und schließlich zoomen wir in das Diagramm auf die Hälfte des gesamten Bereichs, damit wir später langsam den Zoomfaktor ändern können, um den Effekt der sich bewegenden Stadt zu erzeugen.
function startZoomAnimation(){
// Animate the start and end values slowly to make it look like the city is moving
var animation = dateAxis.animate([{property:"start", from:0, to:0.5}, {property:"end", from:0.5, to:1}], 15000, am4core.ease.linear);
animation.events.on("animationended", startZoomAnimation);
}Hier ist der gesamte Code, der Trail-Teil wurde zur besseren Übersichtlichkeit weggelassen
am4core.useTheme(am4themes_amchartsdark);
am4core.useTheme(am4themes_animated);
// Main container
var mainContainer = am4core.create("introchart", am4core.Container);
mainContainer.width = am4core.percent(100);
mainContainer.height = am4core.percent(100);
var chart = mainContainer.createChild(am4charts.XYChart);
chart.padding(0, 0, 0, 0)
chart.zIndex = 20;
var data = [];
var date = new Date(2000, 0, 1, 0, 0, 0, 0);
for (var i = 0; i < 40; i++) {
var newDate = new Date(date.getTime());
newDate.setDate(i + 1);
var value = Math.abs(Math.round(((Math.random() * 100 - i + 10) / 10)) * 10)
data.push({ date: newDate, value: value });
}
chart.data = data;
chart.zoomOutButton.disabled = true;
chart.seriesContainer.zIndex = -1;
chart.background.fillOpacity = 0.2;
var gradient = new am4core.LinearGradient();
gradient.addColor(am4core.color("#222a3f"));
gradient.addColor(am4core.color("#0975da"));
gradient.rotation = -90;
chart.background.fill = gradient;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.ticks.template.disabled = true;
dateAxis.renderer.axisFills.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
dateAxis.rangeChangeEasing = am4core.ease.sinIn;
dateAxis.renderer.inside = true;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
dateAxis.renderer.baseGrid.disabled = true;
dateAxis.tooltip.disabled = true;
dateAxis.renderer.line.disabled = true;
dateAxis.renderer.grid.template.strokeOpacity = 0.07;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.ticks.template.disabled = true;
valueAxis.renderer.axisFills.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.inside = true;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.tooltip.disabled = true;
valueAxis.renderer.line.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.grid.template.strokeOpacity = 0.07;
var series = chart.series.push(new am4charts.ColumnSeries())
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.sequencedInterpolation = true;
series.fillOpacity = 1;
series.fill = am4core.color("#222a3f");
series.stroke = am4core.color("#222a3f")
series.columns.template.width = am4core.percent(100);
chart.events.on("ready", startZoomAnimation);
function startZoomAnimation(){
// Animate the start and end values slowly to make it look like city is moving
var animation = dateAxis.animate([{property:"start", from:0, to:0.5}, {property:"end", from:0.5, to:1}], 15000, am4core.ease.linear);
animation.events.on("animationended", startZoomAnimation);
}Das Säulendiagramm erscheint und biegt sich zu einem Radardiagramm
Können Sie erraten, was in der letzten Szene passiert? Das anfängliche Diagramm (das wie ein normales Säulendiagramm aussieht) ist tatsächlich ein sogenanntes Radardiagramm mit einem sehr kleinen Bogen zwischen den Eigenschaften startAngle (269,9°) und endAngle (270,1°) des Diagramms.
var radarChart = mainContainer.createChild(am4charts.RadarChart);
// ... Chart properties go here
radarChart.startAngle = 269.9;
radarChart.endAngle = 270.1;Der gesamte Bogenwinkel beträgt nur 0,2 Grad, und deshalb wird der Radius eines Diagramms sehr groß und es ist schwer, es von einem normalen XY-Diagramm zu unterscheiden. Und alles, was wir tun, um das Diagramm zu biegen, ist, den Start- und Endwinkel zu animieren. Ich sagte es Ihnen... wir können buchstäblich alles animieren, einschließlich Winkel!
radarChart.events.on("ready", bend);
function bend() {
var animation = radarChart.animate([{ property: "startAngle", to: 90 }, { property: "endAngle", to: 450 }], 3500, am4core.ease.cubicIn).delay(1000);
animation.events.on("animationended", unbend);
}
function unbend() {
var animation = radarChart.animate([{ property: "startAngle", to: 269.9 }, { property: "endAngle", to: 270.1 }], 3500, am4core.ease.cubicIn).delay(500);
animation.events.on("animationended", bend);
}Hier ist diese Biegeanimation in ihrer ganzen Pracht
Siehe den Pen Zerlegung des amCharts-Films, das Diagramm biegen von amCharts Team (@amcharts) auf CodePen.
OK, wir sind fertig!
Oh, aber es gibt noch eine letzte, wichtige Sache, die ich erwähnen möchte: Container. Alle Diagramme und anderen nicht-Diagramm-Objekte in diesem Film sind in einem einzigen Div-Element enthalten. Anfänglich haben wir mainConatainer erstellt und alle Objekte darin angeordnet. Container unterstützen horizontale, vertikale, Raster- und absolute Layouts. Feste oder absolute Positionen können für die Kinder eines Containers verwendet werden, und Container können in andere Container verschachtelt werden. Sie können horizontal oder vertikal ausgerichtet werden, eine feste oder absolute Breite oder Höhe haben... und so weiter. Und habe ich erwähnt, dass amCharts integrierte Datums-, Zahlen- und Textformatierer hat? Ehrlich gesagt, ich höre hier auf.
Als Mitglied des amCharts-Teams höre ich oft Kommentare wie: „Aber das kann man alles mit d3 machen.“ Ja, da haben Sie wahrscheinlich Recht. Aber es gibt immer noch echte Vorteile, mit denen wir hier arbeiten – weniger Codezeilen, Zeit für das Schreiben, und ein relativ einfacher Einstieg. Die gesamte Animation besteht aus 1.000 Codezeilen, ist also auch eine ziemlich leichte Ressource.
Aber ich bin wirklich daran interessiert, was Sie denken. Haben Sie amCharts schon einmal ausprobiert und haben Beispiele zu zeigen? Wie sieht es mit Fragen zum Einstieg aus? Oder sind Sie vielleicht überhaupt nicht von dem Konzept überzeugt und möchten die Vor- und Nachteile besprechen? Lassen Sie es uns in den Kommentaren wissen!