您可以使用 kendo ui PivotGrid 组件。它是为处理分类数据而构建的。但是，您可能会发现这会占用大量空间。
这就留下了自己手动旋转数据的任务。如果您假设所有数据中的Date 值永远不会有两个不同年份的一个月（如果有 01-01-2018 和 01-01-2017 它们都是一月），那么这项任务相对简单每个日期/名称组合只有一行。 （如果日期/名称有两个值，您必须决定如何处理该值？最小值、最大值、第一个、最后一个、意思？）
data =
[
{ Date: '01-01-2018', Name: 'Foo', Value: 1000},
{ Date: '02-01-2018', Name: 'Foo', Value: 2000},
{ Date: '03-01-2018', Name: 'Foo', Value: 3000},
{ Date: '01-01-2018', Name: 'Bar', Value: 1400},
{ Date: '02-01-2018', Name: 'Bar', Value: 2000},
{ Date: '03-01-2018', Name: 'Bar', Value: 5000}
];
// distinct month nums over all data
months = [];
data.forEach(function(item) {
var parts = item.Date.split('-');
var month = parts[0] - 1;
if (months.indexOf(month) == -1) months.push(month);
});
// sort and convert month num to month name (for columns)
months.sort();
months.forEach(function(monthNum,index,arr) {
arr[index] = new Date(2018,monthNum,1).toLocaleString("en-US", { month: "short" });
});
function mmddyyyyToMon(mmddyyyy) {
var parts = mmddyyyy.split("-");
var jsMonth = parts[0] - 1;
var jsDay = parts[1];
var jsYear = parts[2];
return new Date(jsYear,jsMonth,jsDay).toLocaleString("en-US", { month: "short" });
}
// helper to make sure pivot item has one field for every month observed over all data
function newPivotItem () {
var result = { Name: '' };
months.forEach(function(month) {
result[month] = undefined;
})
return result;
}
// presume data grouped by Name and ordered by month within
var pivotData = [];
var pivotItem = {};
data.forEach (function (item) {
var parts = item.Date.split("-");
var jsMonth = parts[0] - 1;
var jsDay = parts[1];
var jsYear = parts[2];
var month = new Date(jsYear,jsMonth,jsDay).toLocaleString("en-US", { month: "short" });
if (pivotItem.Name != item.Name) {
// start next group of data for a name
pivotItem = newPivotItem();
pivotData.push(pivotItem);
pivotItem.Name = item.Name;
}
// set value for month for the name
pivotItem[month] = item.Value;
})
console.log (pivotData);