Передача данных представления Django в диаграмму JavaScript

У меня есть некоторые данные, которые возвращаются через Django view, я пытаюсь отобразить эти данные в Apex Pie Chart.

Так что мне нужно передать данные в JavaScript, поскольку именно здесь находится серия данных.

var pieColors = getChartColorsArray("#pie_chart"),
    options = {
        chart: {
            height: 320,
            type: "pie"
        },
        series: [44, 55, 41, 17, 15],
        labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
        colors: pieColors,
        legend: {
            show: !0,
            position: "bottom",
            horizontalAlign: "center",
            verticalAlign: "middle",
            floating: !1,
            fontSize: "14px",
            offsetX: 0
        },
        responsive: [{
            breakpoint: 600,
            options: {
                chart: {
                    height: 240
                },
                legend: {
                    show: !1
                }
            }
        }]
    };
(chart = new ApexCharts(document.querySelector("#pie_chart"), options)).render();

Как мне передать данные, поскольку они должны быть динамическими в том смысле, что данные в круговой диаграмме могут меняться на основе других действий в приложении?

Нужно просто вставить JS в мой HTML-шаблон, а затем установить значения серий в

series: [{{ value.1 }}, {{ value.2 }}, ...],

Спасибо

Если вы используете блок <script> в вашем html шаблоне, вы можете передать контекстные данные

series: [{{value.1}}, {{value.1}}...],

или

series: [ 
         {% for value in data %}
             {{value}},
         {% endfor %}
],

Другой способ - добавить переменную в html-шаблон, тогда вы сможете использовать 'values' внутри файла script.js

<script>
var values = JSON.parse("[{{value.1}}, {{value.2}},]")
</script>
<script src="{% static 'js/script.js' %}"></script>
Вернуться на верх