Chart.js动态JavaScript代码改造及日期格式优化求助

下面是满足你需求的修改后代码，同时修复了原代码中的语法错误：

HTML部分 #

<div>
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JavaScript部分 #

const ctx = document.getElementById('myChart');
const data = JSONinput;

// 提取并格式化日期标签（仅保留日期部分）
const formattedDates = data[0].DataPoints.map(p => p.LogDate.split('T')[0]);

// 动态生成数据集，适配任意数量的类别
const dynamicDatasets = data.map(category => ({
    label: category.Name,
    data: category.DataPoints.map(point => point.Score),
    // 自动分配不同颜色，避免新增类别时颜色重复
    borderColor: `hsl(${Math.random() * 360}, 70%, 50%)`,
    fill: false
}));

new Chart(ctx, {
    type: 'line',
    data: {
        labels: formattedDates,
        datasets: dynamicDatasets
    },
    options: {
        responsive: true,
        scales: {
            x: {
                title: {
                    display: true,
                    text: '日期'
                }
            },
            y: {
                title: {
                    display: true,
                    text: '分数'
                }
            }
        }
    }
});

关键修改说明 #

1. 动态数据集生成：
   使用data.map()遍历输入的每个类别对象，自动生成对应的折线图数据集。无论新增多少个类别（比如第5个、第6个），代码都会自动适配，无需手动添加新的数据集对象。

2. 日期格式化：
   通过split('T')[0]将ISO格式的日期时间字符串（如2023-02-19T13:07:13.643）截断为仅保留日期部分（2023-02-19），直接满足简化日期显示的需求。

3. 优化细节：

   • 添加自动生成随机颜色的逻辑，确保新增类别折线有不同颜色区分
   • 修复原代码中Chart构造函数末尾多余的分号语法错误
   • 增加坐标轴标题，提升图表可读性

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