Highcharts in Django: JSON-Daten anstelle von Diagrammen auf Webseiten anzeigen

Question

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

Answer 1

我会赞同 @kikon 的建议 - 这将有助于 a) 查看正在生成的 localhost 页面的实际源代码，b) 查看控制台输出以查看是否抛出任何 JS 错误。如果没有看到这些，恐怕我无法在这里提供太多帮助。

但是，可能相关的一件事是，您当前正在 HTML <body> 中加载 <script/> 标记。

这有点反模式，因为这意味着您的 Highcharts 构造函数 (Highcharts.stockChart()) 可能会在相关 Highcharts 模块有机会加载之前执行，这将在控制台中抛出 ReferenceError 。

更好的模式是在 <head/> 块中包含 <script/> 标签，并使用 defer 属性，然后在 DOM 相关事件上触发 Highcharts 构造函数，例如 DOMContentLoaded 或类似的（确切的事件可能取决于您的具体用例/流程）。

完成相同任务的另一种模式是使用重试的异步函数（捕获相关的 ReferenceError），直到加载脚本。

当然，这些只是猜测 - 如果不查看 HTML 输出和控制台输出，很难准确确定这里发生了什么。

顺便说一句，如果您尝试将 Highcharts 集成到 Django 中，您可能还需要查看 Highcharts for Python 工具包刚刚作为 Highcharts 的付费插件发布（完全公开，我是 Highcharts for Python 工具包的创建者），它可以简化您的一些 Django 视图集成。

同时，我希望这个答案可以帮助您诊断/解决问题，如果您分享更多详细信息，我很乐意通过更准确的诊断/建议来修改这个答案。