Datenvisualisierung ist die Praxis der Darstellung von Daten/Informationen in bildlichen oder grafischen Formaten. Es ist ein Mittel, mit dem große Datensätze oder Metriken in visuelle Elemente wie Karten, Grafiken und Diagramme umgewandelt werden, die für den Endbenutzer viel ansprechender sind.
Das JavaScript-Ökosystem verfügt derzeit über mehrere zuverlässige, erstklassige Bibliotheken für die Datenvisualisierung. Einige davon umfassen D3.js, Highcharts, Charts.js, Rechart usw. In diesem Artikel verwenden wir jedoch Highcharts, um unsere Diagramme zu erstellen.
Highcharts ist eine JavaScript-Bibliothek zum Erstellen SVG-basierter, reaktionsfähiger und interaktiver Diagramme für Web und Mobilgeräte. Es ermöglicht eine umfassende Anpassung von Diagrammen über JavaScript oder CSS. Highcharts bietet vier Produktkategorien zum Erstellen von Diagrammen. Dazu gehören:
Wir werden die Highcharts-Aktie verwenden, um gestaltete Candlesticks mit Oszillatoren und technischen Indikatoren zu erstellen, die vom Stock Tools-Modul bereitgestellt werden.
Ein Candlestick-Chart (oder japanischer Candlestick-Chart) ist eine Art Finanzdiagramm, das von Händlern verwendet wird, um mögliche Preisbewegungen einer Aktie, eines Wertpapiers oder einer Währung auf der Grundlage früherer Muster zu bestimmen. Dabei werden wichtige Preispunkte/OHLC-Werte (Open, High, Low, Close) verwendet, die in regelmäßigen Abständen über einen bestimmten Zeitraum hinweg erfasst werden.
Nicht zu verwechseln mit dem typischen Candlestick-Diagramm ist das Heikin-Ashi-Diagramm („Durchschnittsbalken“). Obwohl es mit dem Candlestick-Chart identisch ist, wird es meist in Verbindung mit dem Candlestick verwendet, da es die Analyse von Candlestick-Chart-Trends erleichtert. Dadurch wird es besser lesbar.
Die Highcharts-API bietet Optionen zum Erstellen von Candlestick-Diagrammen und Heikin-Ashi-Diagrammen. Dieser Artikel konzentriert sich auf Candlestick-Charts; Ich werde jedoch auf die Kompromisse hinweisen, die für die Erstellung eines Heikin-Ashi-Diagramms erforderlich sind. Machen wir uns doch mal die Hände schmutzig, ja?!
Um Highcharts nutzen zu können, müssen wir zunächst Highcharts herunterladen. Highcharts bietet mehrere Optionen, um Highcharts in Ihr Projekt einzuführen. Sie haben die Wahl zwischen:
Wir werden für diesen Artikel das Highcharts CDN verwenden.
Der Großteil des HTML-Codes enthält Skript-Tags, die zum Laden des Highcharts-CDN verwendet werden. Die ersten drei sind erforderliche Module für alle mit Highcharts erstellten Aktiencharts.
<script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/data.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
Im Gegensatz zu Candlestick-Diagrammen müssen Sie zum Erstellen eines Heikin-Ashi-Diagramms das Modul wie folgt separat einbinden:
<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>
Das letzte CDN, das wir in unsere Anwendung integrieren müssen, ist das Stock Tools-Modul. Dies ermöglicht uns die Nutzung technischer Indikatoren. Das Stock Tools-Modul muss zuletzt geladen werden, damit es alle verfügbaren Module von oben aufnehmen kann.
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
Anstatt alle technischen Indikatoren aus dem Stock Tools-Modul zu laden, können Sie je nach Bedarf auch bestimmte Indikatoren laden:
<script src="https://code.highcharts.com/indicators/indicators.js"></script> <script src="https://code.highcharts.com/indicators/rsi.js"></script> <script src="https://code.highcharts.com/indicators/ema.js"></script> <script src="https://code.highcharts.com/indicators/macd.js"></script>
Zuletzt müssen wir ein HTML-Element erstellen, um unser Diagramm zu speichern, auf das wir im JavaScript verweisen können:
<div> <h3> The JavaScript </h3> <p><strong>Bringing in our Data</strong><br> The first item on our itinerary is to bring in the data we will be plotting. Highcharts provides a .getJSON method similar to that of jQuery, which is used for making HTTP requests. It also provides a stockChart class for creating the chart. The stockChart class takes in two parameters:</p>
Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365',
function (candlestick) {
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'Untitled Masterpiece'
},
series: [
{
type: "candlestick", //heikinashi for Heikin-Ashi chart
name: "Ethereum", //chart name
id: "eth", // chart id, useful when adding indicators and oscillators
data: candlestick, //data gotten from the API call above
},
],
yAxis: [
{
height: "100%", // height of the candlestick chart
visible: true,
}
]
});
});
Der obige Code gibt uns einen einfachen Candlestick mit grundlegendem Styling, bereitgestellt von Highcharts.
Die Highcharts Stock Tools sind eine optionale Funktion in Highcharts. Sie können entweder die gesamte grafische Benutzeroberfläche (GUI) von Stock Tools aktivieren, die es Benutzern ermöglicht, je nach Bedarf Indikatoren und Oszillatoren hinzuzufügen, oder bestimmte Stock Tools über Javascript zu Ihrer Web-App hinzufügen.
Wir werden unserem Diagramm einen Indikator (Beschleunigungsbänder) und einen Oszillator (fantastischer Oszillator) hinzufügen. Dazu müssen wir sowohl die Serien- als auch die yAxis-Objekte oben bearbeiten:
series: [
{
type: "candlestick",
name: "Ethereum",
id: "eth", // chart id, useful when adding indicators and oscillators
data: data,
},
{
type: "abands", //acceleration bands indicator
id: "overlay", // overlays use the same scale and are plotted on the same axes as the main series.
linkedTo: "eth", //targets the id of the data series that it points to
yAxis: 0, // the index of yAxis the particular series connects to
},
{
type: "ao", // awesome oscillator
id: "oscillator", // oscillators requires additional yAxis be created due to different data extremes.
linkedTo: "eth", //targets the id of the data series that it points to
yAxis: 1, // the index of yAxis the particular series connects to
},
],
yAxis: [
{
//index 0
height: "80%", //height of main series 80%
resize: {
enabled: true, // allow resize of chart heights
},
},
{
//index 1
top: "80%", // oscillator series to begin at 80%
height: "20%", //height of oscillator series
},
],
Das haben wir jetzt:
Bevor wir mit der Gestaltung des Diagramms beginnen können, müssen wir zunächst die verschiedenen Teile verstehen, aus denen das Diagramm besteht.
Highcharts bietet zwei Möglichkeiten, Diagramme zu gestalten:
Wir werden für diesen Artikel den Highcharts-Standardstil verwenden. Daher innerhalb des Optionsobjekts:
<script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/data.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
Das wird unser endgültiges Diagramm:
Durch die Erstellung gestalteter Kryptowährungskerzen mit Highcharts können Sie Rohdaten in visuell ansprechende und umsetzbare Erkenntnisse umwandeln. Durch die Nutzung der Flexibilität von Highcharts können Sie Candlestick-Charts anpassen, um sie an Ihr Branding anzupassen, das Benutzererlebnis zu verbessern und Markttrends effektiv zu kommunizieren. Unabhängig davon, ob Sie ein Finanz-Dashboard erstellen oder eine Handelsplattform verbessern, ist die Fähigkeit, maßgeschneiderte Visualisierungen zu entwerfen und zu implementieren, eine entscheidende Fähigkeit in der heutigen datengesteuerten Landschaft.
Mit den in diesem Leitfaden beschriebenen Schritten verfügen Sie nun über eine Grundlage für die Zusammenarbeit mit Highcharts zur Erstellung dynamischer Candlestick-Charts. Entdecken Sie zusätzliche Anpassungen und experimentieren Sie mit der umfangreichen API von Highcharts, um Ihre Kryptowährungsvisualisierungen auf die nächste Ebene zu bringen.
Das obige ist der detaillierte Inhalt vonDatenvisualisierung: So erstellen Sie gestaltete Kryptowährungs-Candlesticks mit Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
