如何用JavaScript/jQuery统计DataTable日数据量适配Chart.js折线图

看起来你已经走了大半流程，只是在日期格式化和统计逻辑上有点小问题，我来帮你梳理并修正代码：

核心问题分析 #

你当前的代码里，循环修改日期的部分逻辑有问题——你在each循环里又套了一个for循环，还手动i++，这会导致很多日期没被正确格式化，而且直接修改DOM元素的HTML也不是最优做法。我们应该先提取日期文本，再处理成YYYY-MM-DD格式，最后做统计。

修正后的完整代码 #

function printChart() { 
    var table = $('#datatable').DataTable(); 
    // 初始化统计对象，用来存每日的出现次数
    var dateCount = {};

    // 遍历第4列的所有日期单元格
    $("tr>td:nth-child(4)").each(function(){
        // 获取单元格的原始日期文本，去除前后空格
        var rawDate = $(this).text().trim();
        // 用moment.js将日期格式化为YYYY-MM-DD（自动忽略时分秒部分）
        var formattedDate = moment(rawDate).format("YYYY-MM-DD");
        
        // 统计每日的出现次数
        if(dateCount[formattedDate]){
            dateCount[formattedDate]++;
        } else {
            dateCount[formattedDate] = 1;
        }
    });

    // 将统计结果转换成Chart.js需要的结构
    // 先按日期排序，保证折线图的横轴顺序正确
    var sortedDates = Object.keys(dateCount).sort();
    var arrayOfOccurrencies = sortedDates.map(date => dateCount[date]);

    // 初始化Chart.js图表
    var ctx = document.getElementById('myChart'); 
    var myChart = new Chart(ctx, { 
        type: 'line', 
        data: { 
            labels: sortedDates, // 用排序后的日期作为横轴标签
            datasets: [{ 
                label: 'Total distribution', 
                data: arrayOfOccurrencies, // 对应每日的统计次数
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1 
            }] 
        }, 
        options: { 
            responsive: true, 
            maintainAspectRatio: false, 
            scales: { 
                yAxes: [{ ticks: { beginAtZero: true } }] 
            } 
        } 
    }); 
}

关键修正点说明 #

• 正确格式化日期：直接用moment(rawDate).format("YYYY-MM-DD")处理原始日期字符串，不管原始字符串有没有时分秒，都会精准提取出日期部分。
• 简化统计逻辑：去掉了多余的嵌套for循环，直接在each遍历里完成统计，避免重复操作DOM元素。
• 适配Chart.js结构：把统计对象转换成排序后的labels（日期数组）和data（次数数组），这样折线图的横轴会按日期顺序展示，数据对应准确。
• 容错处理（可选）：如果存在无效日期，你可以添加判断跳过：

  if(!moment(rawDate).isValid()) return;
  

原生JS替代方案（无需moment.js） #

如果你的项目没引入moment.js，也可以用原生JS处理标准格式的日期：

// 仅适用于YYYY-MM-DD HH:mm:ss这类标准格式
function formatDate(rawDate) {
    return rawDate.split(' ')[0]; // 直接截取空格前的日期部分
}

把代码里的formattedDate = moment(rawDate).format("YYYY-MM-DD")替换成formattedDate = formatDate(rawDate)即可。

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