MVC应用中Kendo UI折线图趋势线日期显示异常问题

问题描述 #

在MVC应用内使用Kendo UI折线图绘制趋势线时，指定日期无法正确显示：传入日期值/Date(1712730600000)/应显示为2024年4月10日，但实际仅展示当月第一天2024年4月1日。

问题原因 #

代码中categoryAxis配置了baseUnit: "months"，Kendo UI的日期轴在设置该参数时，会自动将所有日期数据归组到对应月份的第一天，这是组件默认的日期分组行为，导致原始日期的具体日份被忽略。

解决方案 #

根据数据展示需求，可通过以下方式修复：

调整日期轴基础单位 #

将baseUnit从"months"改为"days"（适配按天维度的数据展示），这样折线图会保留原始日期的完整信息，不会自动归组到月首。

修改后的categoryAxis配置示例：

categoryAxis: [{    
    type:"date",
    baseUnit: "days", // 改为按天作为基础单位
    baseUnitStep: 1,        
    labels: {
        step: 3,
        template: '#= kendo.toString(value, "MM/dd/yyyy") #', // 按需修改日期显示格式
        visible: true
    }
}],

确认日期转换正确性 #

确保toDate函数已正确将JSON日期格式转换为JavaScript Date对象，保证数据源中TimeStamp字段是完整的日期值：

function toDate(value) {         
    var dateRegExp = /^\/Date\((.*?)\)\/$/;
    var date = dateRegExp.exec(value);
    return new Date(parseInt(date[1]));     
}

该函数可正确解析/Date(1712730600000)/为2024-04-10的Date对象。

额外检查点 #

确认tooltip模板中category引用的是原始日期值，避免格式化时丢失日份信息：

tooltip: {
    visible: true,
    template: "${ kendo.toString(value, 'n0')}</br>${ kendo.toString(category, 'MM/dd/yyyy')}"
}

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