在Python/PyCharm中实现Chart.js折线图标签动态渲染

在Django项目中使用Chart.js创建折线图时，希望通过后端传递的player1和player2动态设置数据集标签，但直接将label改为{{ player1 }}后图表完全无法显示。

现有代码 #

views.py #

def graph1(request):
    labels = [1, 2, 3, 4, 5]
    data1 = [1, 3, 2, 5, 4]
    data2 = [5, 8, 9, 6, 7]
    player1 = 'Paul'
    player2 = 'Lisa'
    return render(request, 'graph1.html', {
        'labels': labels,
        'data1': data1,
        'data2': data2,
        'player1': player1,
        'player2': player2,
    })

原HTML代码 #

<div id="container" style="width: 100%;">
    <canvas id="line-chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
    var config = {
        type: 'line',
        data: {
            labels: {{ labels }},
            datasets: [{
                data: {{ data1 }},
                label: "Player 1",
                borderColor: "#3e95cd",
                fill: false,
                tension: 0
            }, {
                data: {{ data2 }},
                label: "Player 2",
                borderColor: "#8e5ea2",
                fill: false,
                tension: 0
            }]
        },
    };

    window.onload = function() {
        var ctx = document.getElementById('line-chart').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
</script>

问题原因 #

直接使用label: {{ player1 }}时，Django会将其渲染为label: Paul——这在JavaScript中属于未定义变量，导致语法错误，进而使Chart.js无法初始化图表。必须将渲染后的字符串用引号包裹，才能成为合法的JS字符串值。

修复后的HTML代码 #

修改datasets中的label字段，给模板变量添加引号：

<div id="container" style="width: 100%;">
    <canvas id="line-chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
    var config = {
        type: 'line',
        data: {
            labels: {{ labels }},
            datasets: [{
                data: {{ data1 }},
                label: "{{ player1 }}",
                borderColor: "#3e95cd",
                fill: false,
                tension: 0
            }, {
                data: {{ data2 }},
                label: "{{ player2 }}",
                borderColor: "#8e5ea2",
                fill: false,
                tension: 0
            }]
        },
    };

    window.onload = function() {
        var ctx = document.getElementById('line-chart').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
</script>

补充说明 #

• 如果玩家名称包含引号、反斜杠等特殊字符，建议使用Django的escapejs过滤器进行转义，避免再次触发JS语法错误：

  label: "{{ player1|escapejs }}",
  

• 数字类型的labels、data1、data2不需要添加引号，因为Django会自动将Python列表渲染为符合JS语法的数组格式（例如[1,2,3]）。

内容的提问来源于stack exchange，提问作者Frederik Kolderup