Jinja数据渲染Google Visualization多折线时间序列图异常修复求助

Google Visualization的折线图中，每一条独立折线对应DataTable里一个独立的数值类型列，你当前代码仅定义了1个得分列，所有用户的分数都写入同一列，自然只能渲染出一条折线。同时你的代码存在循环变量重名问题：内外两层for循环都用了i作为迭代变量，会导致外层用户遍历逻辑异常。

先聚合所有日期和用户列表，按用户动态创建数值列，再按日期对齐每个用户的得分数据，修改后的完整代码如下：

<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
    const datas = JSON.parse({{persons_performance|tojson|safe}});
    // 第一步：提取所有用户列表、所有日期列表
    const userList = [];
    const allDateMap = new Map();
    datas.forEach(userData => {
        userList.push(userData.user);
        // 遍历当前用户的所有日期，存入全局日期Map去重
        userData.daily_scores.forEach(scoreItem => {
            const date = new Date(scoreItem.date);
            // 用时间戳作为key避免日期对象重复问题
            allDateMap.set(date.getTime(), date);
        })
    });
    // 日期按时间升序排序
    const sortedDates = Array.from(allDateMap.values()).sort((a,b) => a.getTime() - b.getTime());
    
    // 第二步：初始化DataTable，先加日期列，再按用户加得分列
    const data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    userList.forEach(userName => {
        data.addColumn('number', userName);
    });
    
    // 第三步：按日期组装每行数据
    const rows = [];
    sortedDates.forEach(date => {
        const row = [date];
        userList.forEach(userName => {
            // 匹配对应用户当前日期的得分
            const userData = datas.find(item => item.user === userName);
            const scoreItem = userData.daily_scores.find(item => new Date(item.date).getTime() === date.getTime());
            row.push(scoreItem ? scoreItem.score : null);
        });
        rows.push(row);
    });
    data.addRows(rows);
    
    // 第四步：调整配置，打开图例显示用户与折线的对应关系
    const options = {
        title: "Person Performance over Time",
        height: 500,
        width: 1300,
        hAxis: {
            title: 'Time',
            textPosition: 'none'
        },
        vAxis: {
            title: 'Score'
        },
        curveType: 'function', // 所有折线统一使用平滑曲线
        legend: {position: 'right'}
    };

    const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>

如果出现日期对齐异常，可在转换Date对象时统一做格式标准化处理，避免不同浏览器的日期解析规则差异导致数据匹配失败。

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