.NetCore数据接入Google Chart时日期类型不匹配问题求助

我之前也碰到过一模一样的问题，核心原因是Google Chart的date列类型要求值是JavaScript的Date对象或特定格式的日期数组，而我们后端返回的2018-04-22T00:00:00是ISO格式的字符串，被识别成了string类型，所以才会抛出类型不匹配的错误。下面给你几个可行的解决方法：

方法一：后端返回时间戳，前端转换为Date对象 #

修改后端的GetProdVal方法，把DateTime转换为从1970-01-01 UTC开始的毫秒时间戳：

public List<object[]> GetProdVal() 
{ 
    List<object[]> value = new List<object[]>(); 
    foreach (var item in valuelist) 
    { 
        // 将DateTime转换为毫秒级时间戳
        long timestamp = new DateTimeOffset(item.Date).ToUnixTimeMilliseconds();
        object[] val = { timestamp, item.TotalCost }; 
        value.Add(val); 
    } 
    return value; 
}

前端拿到数据后，把时间戳转为JavaScript的Date对象再添加到图表：

prodval_chartData = @Json.Serialize(ViewBag.productionvalue, new Newtonsoft.Json.JsonSerializerSettings { StringEscapeHandling =Newtonsoft.Json.StringEscapeHandling.EscapeHtml}); 
var prodval_data = new google.visualization.DataTable(); 
prodval_data.addColumn('date', 'Date'); 
prodval_data.addColumn('number', 'Total'); 

// 转换时间戳为Date对象
var formattedRows = prodval_chartData.map(row => {
    return [new Date(row[0]), row[1]];
});

prodval_data.addRows(formattedRows);

方法二：后端直接返回Google Chart识别的日期数组 #

Google Chart的date类型可以直接识别[年, 月(0-11), 日]格式的数组（注意JS的月份是从0开始的，所以要减1），后端直接构造这种格式：

public List<object[]> GetProdVal() 
{ 
    List<object[]> value = new List<object[]>(); 
    foreach (var item in valuelist) 
    { 
        // 构造Google Chart兼容的日期数组
        object[] dateParts = { item.Date.Year, item.Date.Month - 1, item.Date.Day };
        object[] val = { dateParts, item.TotalCost }; 
        value.Add(val); 
    } 
    return value; 
}

这种方式下前端不需要额外处理，直接调用addRows即可：

prodval_chartData = @Json.Serialize(ViewBag.productionvalue, new Newtonsoft.Json.JsonSerializerSettings { StringEscapeHandling =Newtonsoft.Json.StringEscapeHandling.EscapeHtml}); 
var prodval_data = new google.visualization.DataTable(); 
prodval_data.addColumn('date', 'Date'); 
prodval_data.addColumn('number', 'Total'); 
prodval_data.addRows(prodval_chartData);

方法三：前端直接转换ISO字符串为Date对象 #

如果不想修改后端代码，也可以在前端把返回的ISO日期字符串直接转为Date对象：

prodval_chartData = @Json.Serialize(ViewBag.productionvalue, new Newtonsoft.Json.JsonSerializerSettings { StringEscapeHandling =Newtonsoft.Json.StringEscapeHandling.EscapeHtml}); 
var prodval_data = new google.visualization.DataTable(); 
prodval_data.addColumn('date', 'Date'); 
prodval_data.addColumn('number', 'Total'); 

// 转换ISO日期字符串为Date对象
var formattedRows = prodval_chartData.map(row => {
    return [new Date(row[0]), row[1]];
});

prodval_data.addRows(formattedRows);

这三种方法都能解决类型不匹配的问题，你可以根据自己的项目情况选择最合适的一种。

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