Отображение диаграммы D3.js с помощью бэкенда Django

Я учусь создавать приборную панель, используя Django в качестве бэкенда и D3.js для визуализации.

Следующее является моим index.html:

{% load static %}
<html>
<script src="https://d3js.org/d3.v7.min.js"></script>
<body> 
    <h1> Hello! </h1>
    <script src={% static "js\linechart.js" %}>
        var data = {{ AAPL|safe }};
        
        
        var chart = LineChart(data, {
        x: d => d.date,
        y: d => d.close,
        yLabel: "↑ Daily close ($)",
        width,
        height: 500,
        color: "steelblue"
      })
    
    </script>    
</body>
</html>

Данные AAPl извлекаются из базы данных, и views.py выглядят следующим образом:

from django.shortcuts import render
from django.http import HttpResponse
from cnxn import mysql_access
import pandas as pd

# Create your views here.
def homepage(request):
    sql = ''' select Date, Close from tbl_historical_prices where ticker = 'AAPL' '''
    cnxn = mysql_access()
    conn = cnxn.connect()
    df = pd.read_sql(sql, con=conn)
    context = {'AAPL':df.to_json()}
    return render(request, 'index.html', context=context)

График функциональной линии можно посмотреть здесь, который используется в js\linechat.js в index.html файле.

Я вижу, что Hello! отображается на странице, но не могу увидеть линейный график. Я не могу отладить проблему. На вкладке консоли ошибок также не обнаружено.

Как отобразить линейный график?

Я добавил отображение текущей страницы в прикрепленном изображении.

enter image description here

Закрывайте свой скрипт тегом src и начинайте новый тег скрипта. Наличие src исключает внутренний код.

<script src={% static "js\linechart.js" %}></script>
<script>
...
Вернуться на верх