Highcharts in Django: JSON-Daten anstelle von Diagrammen auf Webseiten anzeigen
Also habe ich versucht, mit Highcharts in Django ein Candlestick-Diagramm zu erstellen, aber ich kann das Diagramm nicht auf der Webseite anzeigen, stattdessen wird eine JSON-Liste der abgerufenen Daten angezeigt.
Ich verwende die API von iexcloud, um historische Daten abzurufen
Das ist meine Logik: View.py-Datei:
def candlestick_chart_data(request):
api_key = 'my_api_key'
stock_data = get_historical_data(
"AAPL", start="2023-01-01", end="2023-05-05", output_format="pandas", token=api_key)
stock_data_array = [{
'x': date.isoformat(),
'open': row['open'],
'high': row['high'],
'low': row['low'],
'close': row['close']
} for date, row in stock_data.iterrows()]
return JsonResponse(stock_data_array, safe=False)
Meine Vorlage: Candlestick_chart.html
{% extends 'base.html' %}
{% block content %}
{% block home_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/9.2.1/css/highcharts.css"
integrity="sha512-bwK5pU3LlQlAocA38e/L90g86uJUZVvJEnpnT5ZyL0j3frzAKcJbhdTl0z0W4pVfTqBqftbX2y/3D2wLxbt6uQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/stock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
{% endblock %}
<div id="container" style="height: 500px; width: 100%;"></div>
<script>
const dataURL = '{% url "candlestick-chart" %}';
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
const { chart } = e.target;
chart.showLoading('Loading data from server...');
fetch(`${dataURL}?start=${Math.round(e.min)}&end=${Math.round(e.max)}`)
.then(res => res.ok && res.json())
.then(data => {
console.log(data)
chart.series[0].setData(data);
chart.hideLoading();
}).catch(error => console.error(error.message));
}
fetch(dataURL)
.then(res => res.ok && res.json())
.then(data => {
data.forEach((d) => {
d.x = new Date(d.x);
});
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'AAPL history by the minute from 1998 to 2011',
align: 'left'
},
subtitle: {
text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading',
align: 'left'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false, // it supports only days
selected: 4 // all
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
},
series: [{
data: data,
dataGrouping: {
enabled: false
}
}]
});
}).catch(error => console.error(error.message));
</script>
{% endblock %}
Und bei Bedarf mein URL-Pfad:
path('candlestick-chart-data/', views.candlestick_chart_data, name='candlestick-chart'),
Dies ist die Ausgabe, die ich auf der Webseite erhalte localhost-Webbild
Ich habe versucht, console.log-Anweisungen in den Code einzufügen, habe versucht, die Daten im Terminal auszudrucken, alles funktioniert gut, aber ich kann nicht verstehen, warum das Diagramm nicht auf der Webseite erscheint, wenn alles gut funktioniert
