Django向Chart.js传日期列表遇两问题：变量冲突与日期格式异常

问题1：重复声明const ctxClose导致语法错误 #

循环生成图表时必须给每个图表的Canvas和JS变量加唯一标识，避免重复声明冲突，推荐用循环计数器或股票对的唯一ID：

1. 模板中动态设置Canvas的ID：

{% for pair in stock_pairs %}
    <canvas id="stock-chart-{{ forloop.counter }}"></canvas>
{% endfor %}

2. 对应JS代码用动态ID获取上下文，同时隔离作用域避免变量冲突：

{% for pair in stock_pairs %}
    <script>
        // 用循环计数器生成唯一上下文变量，或直接链式调用
        const chartCtx = document.getElementById('stock-chart-{{ forloop.counter }}').getContext('2d');
        new Chart(chartCtx, {
            type: 'line',
            data: {
                labels: {{ pair.dates|safe }},
                datasets: [
                    {
                        label: '{{ pair.stock1_name }}',
                        data: {{ pair.close_prices1|safe }},
                        borderColor: '#ff6384',
                        tension: 0.1
                    },
                    {
                        label: '{{ pair.stock2_name }}',
                        data: {{ pair.close_prices2|safe }},
                        borderColor: '#36a2eb',
                        tension: 0.1
                    }
                ]
            }
        });
    </script>
{% endfor %}

如果担心作用域污染，也可以把每个图表的创建逻辑包在立即执行函数里：

{% for pair in stock_pairs %}
    <script>
        (function() {
            const ctx = document.getElementById('stock-chart-{{ forloop.counter }}').getContext('2d');
            new Chart(ctx, { /* 图表配置 */ });
        })();
    </script>
{% endfor %}

问题2：X轴日期显示乱码/格式错误 #

核心是保证日期数据传递格式正确，同时让Chart.js正确解析：

1. Django视图层预处理日期：
   把DateTime对象转成ISO 8601格式字符串（兼容性最好），或者自定义格式化字符串：

# 视图中处理日期列表
for pair in stock_pairs:
    # 假设dates是DateTime对象列表，转成ISO格式
    pair.dates = [date.isoformat() for date in pair.dates]
    # 若要自定义格式，比如YYYY-MM-DD：
    # pair.dates = [date.strftime('%Y-%m-%d') for date in pair.dates]

2. Chart.js配置时间轴解析规则：
   在图表options里把X轴设为时间类型，指定显示格式：

options: {
    scales: {
        x: {
            type: 'time',
            time: {
                unit: 'day', // 根据数据粒度调整：day/month/year
                displayFormats: {
                    day: 'YYYY-MM-DD' // 自定义日期显示格式
                },
                tooltipFormat: 'YYYY-MM-DD' // 鼠标悬浮时的日期格式
            },
            title: {
                display: true,
                text: '日期'
            }
        },
        y: {
            title: {
                display: true,
                text: '收盘价'
            }
        }
    }
}

注意：模板传递日期和价格数据时必须加|safe过滤器，防止Django自动转义HTML实体导致JS解析失败。

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