Django 中的 Highcharts：在網頁上顯示 JSON 資料而不是圖表

Question

因此，我嘗試使用 Django 中的 Highcharts 製作燭台圖，但無法在網頁上顯示圖表，而是顯示所獲取資料的 JSON 清單。

我正在使用 iexcloud 的 API 來取得歷史資料

這是我的邏輯： 視圖.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)

我的模板，即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 %}

以及我的 url 路徑（如果需要）：

path('candlestick-chart-data/', views.candlestick_chart_data, name='candlestick-chart'),

這是我在網頁上得到的輸出 本地主機網頁圖片

我嘗試將 console.log 語句放入程式碼中，嘗試在終端機中列印數據，一切正常，但我無法理解為什麼如果一切正常，圖表不會出現在網頁中

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 視圖整合。

同時，我希望這個答案可以幫助您診斷/解決問題，如果您分享更多詳細信息，我很樂意通過更準確的診斷/建議來修改這個答案。