将 Django 视图数据传递给 JavaScript 图表答案

【问题标题】：Passing Django view data to JavaScript Chart将 Django 视图数据传递给 JavaScript 图表
【发布时间】：2022-01-02 10:14:08
【问题描述】：

我有一些通过 Django 视图返回的数据，我正在尝试在 Apex 饼图中呈现数据。

所以我需要将数据传递到 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>..</script> 标签内添加脚本来传递模板内的上下文

标签： javascript django

【解决方案1】：

如果您在 html 模板中使用 <script> 块，则可以传递上下文数据

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

或

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

另一种方法是在 html 模板中添加变量，然后您可以在 script.js 文件中使用“值”

<script>
var values = JSON.parse("[{{value.1}}, {{value.2}},]")
</script>
<script src="{% static 'js/script.js' %}"></script>

【讨论】：