因此，我嘗試使用 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 語句放入程式碼中，嘗試在終端機中列印數據，一切正常，但我無法理解為什麼如果一切正常，圖表不會出現在網頁中