使用 KendoUI 的堆积图
Stacked graph with KendoUI
我正在尝试使用 kendo ui 在堆叠图中显示数据。这是我的代码:
var data = [
// June
{ Start: "2014-06-01T00:00:00", Name : "Series 1", Value: 1 },
{ Start: "2014-06-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-06-01T00:00:00", Name : "Series 3", Value: 10 },
// July
{ Start: "2014-07-01T00:00:00", Name : "Series 1", Value: 2 },
{ Start: "2014-07-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-07-01T00:00:00", Name : "Series 3", Value: 2 },
// August
{ Start: "2014-08-01T00:00:00", Name : "Series 1", Value: 3 },
{ Start: "2014-08-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-08-01T00:00:00", Name : "Series 3", Value: 1 },
// September
{ Start: "2014-09-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-09-01T00:00:00", Name : "Series 3", Value: 3 },
// October
{ Start: "2014-10-01T00:00:00", Name : "Series 1", Value: 1 },
{ Start: "2014-10-01T00:00:00", Name : "Series 3", Value: 3 }
]
var stocksDataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name"
},
sort: [{ field: "Start", dir: "asc"} ]
});
function createChart() {
$("#chart").kendoChart({
dataSource: stocksDataSource,
series: [{
type: "column",
field: "Value",
name: "#= group.value #",
stack: true,
tooltip: {
template: "#=kendo.toString(new Date(category), 'd MMM yyyy')#<br/>" +
"#=dataItem.Name#<br/>"+
"Value: #=dataItem.Value#",
visible: true
},
}],
categoryAxis: {
field: "Start",
type: "date",
labels: {
format: "MMM"
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
请注意,9 月和 10 月的数据没有某些系列的值。这完全以 quite 无法解释的方式搞砸了图表显示:
如您所见,9 月和 10 月的数据与 json 不匹配。 10 月份的数据尤其奇怪,因为显示了三个值,而只给出了 2 个值。
这是 JSFiddle:http://jsfiddle.net/12ob7qmx/6/
图表上是否有我可以设置的任何设置,或者我是否必须循环遍历数据集并用零值填充缺失的数据?
我解决这个问题的方法是遍历我的数据并用 0 添加缺失值。
我认为没有比您自己建议的更好的方法了。 :(
我在 Telerik 论坛上发现了 a question 个关于这个问题的信息:
The behavior you have observed is expected as the categorical charts
(bar, area etc.) require a matching set of data points (the value can
be null but it should persist in the data). I am afraid there is no
built-in functionality which will automatically set 0 for the missing
values - you should modify your data.
I am afraid the implementation of this functionality is not in our immediate plans, however we may consider it for future versions of the product.
我还没有找到更多最新信息,但据我所知,这还没有解决。
看来我运气不好,我需要修复数据。在我的实际解决方案中,我正在做服务器端,但为了后代,如果有人需要一个纯粹的 js 修复的 kickstart,这是起点:
function fixData(data) {
var lookup =[], start = [], name = [], result =[];
for (i = 0, len = data.length; i < len; ++i) {
start[data[i].Start] = true;
name[data[i].Name] = true;
lookup[data[i].Start + "," + data[i].Name] = data[i].Value;
}
for (var currentStart in start) {
for (var currentName in name) {
var entry = {Start: currentStart, Name: currentName};
entry.Value = lookup[currentStart + "," + currentName] || 0;
result.push(entry);
}
}
return result;
}
JSFiddle:http://jsfiddle.net/12ob7qmx/8/
我正在尝试使用 kendo ui 在堆叠图中显示数据。这是我的代码:
var data = [
// June
{ Start: "2014-06-01T00:00:00", Name : "Series 1", Value: 1 },
{ Start: "2014-06-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-06-01T00:00:00", Name : "Series 3", Value: 10 },
// July
{ Start: "2014-07-01T00:00:00", Name : "Series 1", Value: 2 },
{ Start: "2014-07-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-07-01T00:00:00", Name : "Series 3", Value: 2 },
// August
{ Start: "2014-08-01T00:00:00", Name : "Series 1", Value: 3 },
{ Start: "2014-08-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-08-01T00:00:00", Name : "Series 3", Value: 1 },
// September
{ Start: "2014-09-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-09-01T00:00:00", Name : "Series 3", Value: 3 },
// October
{ Start: "2014-10-01T00:00:00", Name : "Series 1", Value: 1 },
{ Start: "2014-10-01T00:00:00", Name : "Series 3", Value: 3 }
]
var stocksDataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name"
},
sort: [{ field: "Start", dir: "asc"} ]
});
function createChart() {
$("#chart").kendoChart({
dataSource: stocksDataSource,
series: [{
type: "column",
field: "Value",
name: "#= group.value #",
stack: true,
tooltip: {
template: "#=kendo.toString(new Date(category), 'd MMM yyyy')#<br/>" +
"#=dataItem.Name#<br/>"+
"Value: #=dataItem.Value#",
visible: true
},
}],
categoryAxis: {
field: "Start",
type: "date",
labels: {
format: "MMM"
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
请注意,9 月和 10 月的数据没有某些系列的值。这完全以 quite 无法解释的方式搞砸了图表显示:
如您所见,9 月和 10 月的数据与 json 不匹配。 10 月份的数据尤其奇怪,因为显示了三个值,而只给出了 2 个值。
这是 JSFiddle:http://jsfiddle.net/12ob7qmx/6/
图表上是否有我可以设置的任何设置,或者我是否必须循环遍历数据集并用零值填充缺失的数据?
我解决这个问题的方法是遍历我的数据并用 0 添加缺失值。
我认为没有比您自己建议的更好的方法了。 :(
我在 Telerik 论坛上发现了 a question 个关于这个问题的信息:
The behavior you have observed is expected as the categorical charts (bar, area etc.) require a matching set of data points (the value can be null but it should persist in the data). I am afraid there is no built-in functionality which will automatically set 0 for the missing values - you should modify your data.
I am afraid the implementation of this functionality is not in our immediate plans, however we may consider it for future versions of the product.
我还没有找到更多最新信息,但据我所知,这还没有解决。
看来我运气不好,我需要修复数据。在我的实际解决方案中,我正在做服务器端,但为了后代,如果有人需要一个纯粹的 js 修复的 kickstart,这是起点:
function fixData(data) {
var lookup =[], start = [], name = [], result =[];
for (i = 0, len = data.length; i < len; ++i) {
start[data[i].Start] = true;
name[data[i].Name] = true;
lookup[data[i].Start + "," + data[i].Name] = data[i].Value;
}
for (var currentStart in start) {
for (var currentName in name) {
var entry = {Start: currentStart, Name: currentName};
entry.Value = lookup[currentStart + "," + currentName] || 0;
result.push(entry);
}
}
return result;
}
JSFiddle:http://jsfiddle.net/12ob7qmx/8/