Невозможно передать данные в Chart.js с помощью Django

Я использую шаблон bootstrap для своего сайта и у меня проблема с передачей данных из представления в django в html в chart.js

Я пытался передать данные как любую другую переменную, но ничего не вышло. Я не могу увидеть данные

У меня есть 2 диаграммы одна (круговая) с предопределенным набором данных и вторая (пончик) я хочу передать данные из представления, ни одна из них не отображается после рендеринга.

Что я делаю не так?

View.py

        ctx = {
            "tournament": tournament,
            "pairing": pairing,
            "players_points": players_points,
            "army_points": army_points,
            "teamB": teamB,
            "form": form,
            "green": green,
            "yellow": yellow,
            "red": red,
            "green_p": green_p,
            "yellow_p": yellow_p,
            "red_p": red_p,
            "total": total,
            # "chart_data": chart_data,
            "chart_data": json.dumps(chart_data),
        }
        return render(request, "pairing5v5.html", ctx)

html

        <div class="container-fluid pt-4 px-4">
            <div class="row g-4">
                <div class="col-sm-12 col-xl-6">
                    <div class="bg-secondary rounded h-100 p-4">
                        <h6 class="mb-4">Pie Chart</h6>
                        <canvas id="pie-chart" width="500" height="500"></canvas>
                    </div>
                </div>
                <div class="col-sm-12 col-xl-6">
                    <div class="bg-secondary rounded h-100 p-4">
                        <h6 class="mb-4">Doughnut Chart - {{ chart_data|safe }}</h6>
                        <canvas id="doughnut-chart"></canvas>
                    </div>
                </div>
            </div>
        </div>

main.js

    // Pie Chart
    var ctx5 = $("#pie-chart").get(0).getContext("2d");
    var myChart5 = new Chart(ctx5, {
        type: "pie",
        data: {
            labels: ["Italy", "France", "Spain", "USA", "Argentina"],
            datasets: [{
                backgroundColor: [
                    "rgba(235, 22, 22, .7)",
                    "rgba(235, 22, 22, .6)",
                    "rgba(235, 22, 22, .5)",
                    "rgba(235, 22, 22, .4)",
                    "rgba(235, 22, 22, .3)"
                ],
                data: [55, 49, 44, 24, 15]
            }]
        },
        options: {
            responsive: true
        }
    });

    // Doughnut Chart
    var ctx6 = $("#doughnut-chart").get(0).getContext("2d");
    var myChart6 = new Chart(ctx6, {
        type: "doughnut",
        data: {
            labels: ["Green", "Yellow", "Red"],
            datasets: [{
                backgroundColor: [
                    "rgba(235, 22, 22, .7)",
                    "rgba(235, 22, 22, .6)",
                    "rgba(235, 22, 22, .5)",
                ],
                data: {{ chart_data|safe }}
            }]
        },
        options: {
            responsive: true
        }
    });

Вернуться на верх