如何通过Django传递固定值生成12元素JS数组以绘制图表水平线？

问题描述 #

我有一段用于HTML图表曲线的JS代码：

data: [40, 60, 30, 65, 60, 95, 90, 100, 96, 120, 105, 134]

现在需要绘制一条由Django传递的固定值重复12次的水平线（示例值为100），但尝试了两种方法都失败：

• Django端写limit = [mylimit for i in range(1,12)]，JS端写data: {{ limit }}
• Django端手动拼接字符串limit = f"{limit}, {limit}, ...."，JS端写data: [{{ limit }}]

我的目标是根据获取到的任意limit值，生成类似data: [100, 100, 100.....]的JS代码。

完整JavaScript代码如下：

// sales analytics Chart
let situationSocieteChart = {
    labels: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
    legend: true,
    lineTension: .4,
    ticksValue: 'k',
    ticksColor: '#9CA3AF',
    ticksFontSize: 11,
    ticksFontWeight: 100,
    gridBorderDash: [8, 4],
    maxTicksLimit: 10,
    xAxis: true,
    gridColorX: NioApp.Colors.white,
    gridColorY: NioApp.Colors.gray100,
    gridBorderColorX: NioApp.Colors.white,
    gridBorderColorY: NioApp.Colors.white,
    datasets: [
        {
            borderWidth: 3,
            color: NioApp.Colors.yellow,
            backgroundGradient: NioApp.Colors.yellow,
            pointBorderColor: 'transparent',
            pointBackgroundColor: 'transparent',
            pointHoverBackgroundColor: NioApp.Colors.yellow,
            label: "Transactions",
            data: [40, 60, 30, 65, 60, 95, 90, 100, 96, 120, 105, 134]
        },
        {
            borderWidth: 2,
            pointBorderColor: 'transparent',
            pointBackgroundColor: 'transparent',
            color: NioApp.Colors.danger,
            pointHoverBackgroundColor: NioApp.Colors.danger,
            label: "Plafond",
            borderDash: [8, 4],
            data: document.getElementById("situation") // 需要替换为重复12次的固定值列表
        },
    ]
};

解决方案 #

方法1：Django模板直接生成列表 #

在视图中传递单个mylimit变量到模板，在JS代码里用模板循环生成12个重复值：

data: [{% for _ in "xxxxxxxxxxxx" %} {{ mylimit }}{% if not forloop.last %},{% endif %} {% endfor %}]

这里"xxxxxxxxxxxx"是12个字符，对应循环12次，自动生成带逗号分隔的数组元素。

方法2：视图生成完整列表后传递 #

先在Django视图中生成包含12个元素的列表（注意之前range(1,12)只有11个元素，这是失败原因之一）：

# views.py中
mylimit = 100
limit_list = [mylimit for _ in range(12)]  # range(12)生成0-11，共12个元素

然后在模板的JS代码中选择以下方式使用：

• 直接输出（适用于可信数值）：

data: {{ limit_list|safe }}

• 更安全的json_script方式：

<!-- 模板中先添加隐藏的JSON数据 -->
{{ limit_list|json_script:"limit-data" }}

<!-- JS中读取数据 -->
data: JSON.parse(document.getElementById('limit-data').textContent)

方法3：JS端直接生成列表 #

如果不需要Django提前处理，可在JS中根据传递的单个mylimit值生成数组：

// 模板中传递单个值
const limit = {{ mylimit }};

// JS生成12个重复值的数组
data: Array(12).fill(limit)

内容的提问来源于stack exchange，提问作者Kaiss B.