Highcharts dans Django : affichez les données JSON au lieu des graphiques sur les pages Web
J'ai donc essayé de créer un graphique en chandeliers à l'aide de Highcharts dans Django, mais je ne peux pas afficher le graphique sur la page Web, mais il affiche une liste JSON des données récupérées.
J'utilise l'API d'iexcloud pour obtenir des données historiques
Voici ma logique : Fichier View.py :
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)
Mon modèle, qui est chandelier_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 %}
Et mon chemin url si besoin :
path('candlestick-chart-data/', views.candlestick_chart_data, name='candlestick-chart'),
C'est le résultat que j'obtiens sur la page Web image Web de l'hôte local
J'ai essayé de mettre des instructions console.log dans le code, j'ai essayé d'imprimer les données dans le terminal, tout fonctionne bien, mais je ne comprends pas pourquoi le graphique n'apparaît pas dans la page Web si tout fonctionne bien
