Beim Verfolgen von Finanzmärkten und Vermögenspreisbewegungen im Zeitverlauf ist die Kerzenchart ist das branchenübliche Visualisierungswerkzeug. Durch die Kombination von vier zentralen Preispunkten – Eröffnung, Höchststand, Tiefststand und Schlusskurs (OHLC) – in einer einzigen visuellen Säule zeigen Kerzencharts Preisvolatilität, Handelsbereich und Marktsentiment auf einen Blick, wodurch sie für Aktienleistungs-Dashboards, Krypto-Tracker und Rohstoffhandelsansichten unverzichtbar sind.
Die Mechanik von Kerzen
In Apache ECharts werden Kerzenreihen mit type: 'candlestick' (oder der Alias 'k'). Jeder Datenpunkt erfordert ein 4-Werte-Array, das explizit in der Reihenfolge [Eröffnung, Schlusskurs, Tiefststand, Höchststand]. Die Diagramm-Engine zeichnet einen festen oder hohlen Körper zwischen Eröffnung und Schlusskurs, wobei dünne „Wick“-Linien bis zum Tiefst- und Höchststand reichen.
1. Grundlegende Einrichtung
Um einen grundlegenden Kerzenchart zu erstellen, ordnen Sie Zeitwerte entlang einer kontinuierlichen X-Achse zu und übergeben [Eröffnung, Schlusskurs, Tiefststand, Höchststand] Arrays in Ihre Seriendaten:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: {
type: 'category',
data: ['2026-05-01', '2026-05-02', '2026-05-03', '2026-05-04', '2026-05-05']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [Eröffnung, Schlusskurs, Tiefststand, Höchststand] -> Bullish (Schlusskurs > Eröffnung)
[40, 35, 30, 50], // Bearish (Schlusskurs < Eröffnung)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Fortgeschrittene strukturelle Techniken
Kerzencharts können mit internationalen Farbkonventionen angepasst, Zeitbereiche vergrößert oder mit gleitenden Durchschnitten kombiniert werden.
1. Benutzerdefinierte Farben und gleitende Durchschnitte
Passen Sie die Farben für steigende (aufwärts) und fallende (abwärts) Säulen mit itemStyle, und überlagern Sie gleitende Durchschnittslinien, indem Sie Linienserien mit der Kerzenreihe kombinieren:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Täglich K', 'MA5']
},
xAxis: {
type: 'category',
data: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: 'Täglich K',
type: 'candlestick',
data: [
[2320, 2320, 2287, 2362],
[2300, 2291, 2288, 2341],
[2295, 2312, 2290, 2380],
[2315, 2330, 2310, 2360],
[2330, 2325, 2312, 2355],
[2325, 2350, 2320, 2370],
[2350, 2340, 2330, 2385]
],
itemStyle: {
color: '#eb4d4b', // Farbe für Bullen (Schluss > Eröffnung)
color0: '#6ab04c', // Farbe für Bären (Schluss < Eröffnung)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
Feinabstimmung von Layout und interaktiver Zoom
Durch Hinzufügen von Zeitreihen-Zoomsteuerungen erhalten Benutzer Flexibilität beim Navigieren durch dichte historische Handelsaufzeichnungen.
1. Daten-Zoom- und Achsen-Pointer-Steuerelemente
Integrieren Sie horizontale Schieberegler und Mausrad-Zoomen mithilfe des dataZoom Konfigurationsblock:
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', 'Tag 6', 'Tag 7', 'Tag 8']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // Aktiviert das Zoomen mit dem Mausrad
start: 20,
end: 100
},
{
type: 'slider', // Sichtbarer unterer Zoom-Schieberegler
show: true,
top: '90%'
}
],
series: [
{
type: 'candlestick',
data: [
[100, 110, 95, 115],
[110, 105, 100, 112],
[105, 120, 104, 125],
[120, 118, 112, 122],
[118, 125, 115, 128],
[125, 122, 120, 130],
[122, 135, 121, 138],
[135, 130, 128, 140]
]
}
]
};
Strategische Best Practices
- Daten korrekt ordnen: Überprüfen Sie die Array-Struktur sorgfältig! ECharts erwartet
[Eröffnung, Schluss, Tiefstes, Höchstes]—das Vertauschen von Schluss und Tiefstes ist eine häufige Quelle für Darstellungsfehler. - Aktivieren Sie
scale: trueauf der Y-Achse: Fügen Sie stetsscale: trueauf numerischen Preisachsen hinzu, damit das Diagramm automatisch auf den aktuellen Preiskurs skaliert wird, anstatt den Ursprung auf null zu zwingen. - Verwenden Sie Kreuzhair-Achsen-Pointer: Legen Sie fest
tooltip.axisPointer.type = 'cross'um kontinuierliche vertikale und horizontale Hilfslinien anzuzeigen, die eine einfache Ausrichtung von Preis und Zeitstempel ermöglichen.