Highcharts dalam Django: Paparkan data JSON dan bukannya carta pada halaman web
Jadi saya cuba membuat carta candlestick menggunakan Highcharts dalam Django, tetapi saya tidak boleh memaparkan carta pada halaman web, sebaliknya ia memaparkan senarai JSON bagi data yang diambil.
Saya menggunakan API iexcloud untuk mendapatkan data sejarah
Ini logik saya: Fail 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)
Templat saya, iaitu 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 %}
Dan laluan url saya jika perlu:
path('candlestick-chart-data/', views.candlestick_chart_data, name='candlestick-chart'),
Ini adalah output yang saya dapat di halaman web imej web localhost
Saya cuba memasukkan pernyataan console.log ke dalam kod, cuba mencetak data dalam terminal, semuanya berfungsi dengan baik, tetapi saya tidak faham mengapa carta tidak muncul dalam halaman web jika semuanya berfungsi dengan baik
