Kendo ui 如何使剑道UI图表中的条形图变厚？
我的图表有卡路里与时间的数据。卡路里每15分钟就有一个值。我想让这些条更接近。我正在发布一个数据示例，以及一个指向JSFIDLE的链接。另外，是否可以在图表上显示整个24小时，并仅显示具有值的时间Kendo ui 如何使剑道UI图表中的条形图变厚？,kendo-ui,Kendo Ui,我的图表有卡路里与时间的数据。卡路里每15分钟就有一个值。我想让这些条更接近。我正在发布一个数据示例，以及一个指向JSFIDLE的链接。另外，是否可以在图表上显示整个24小时，并仅显示具有值的时间 var data= [{"IntraDayFifteenMinuteActivityKey":443124,"id":"abcd","datetimedata":"7/20/2014 4:15:00 AM","caloriesOut":"17","distance":"0","elevation
var data= [{"IntraDayFifteenMinuteActivityKey":443124,"id":"abcd","datetimedata":"7/20/2014 4:15:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443125,"id":"abcd","datetimedata":"7/20/2014 4:30:00 AM","caloriesOut":"20","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443126,"id":"abcd","datetimedata":"7/20/2014 4:45:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443127,"id":"abcd","datetimedata":"7/20/2014 5:00:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443128,"id":"abcd","datetimedata":"7/20/2014 5:15:00 AM","caloriesOut":"17","distance":"0.00442800018936396","elevation":"0","floors":"0","steps":"6","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443129,"id":"abcd","datetimedata":"7/20/2014 5:30:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"}]
$("#IntraDayDataChart").kendoChart({
dataSource: data,
seriesColors: [color],
chartArea: {
background: ""
},
title: {
text: "Intraday Data",
font: "14px Arial,Helvetica,sans-serif bold"
},
legend: {
visible: false,
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "column",
overlay: {
gradient: "none"
},
gap: .1
},
series: [{
name: type,
field: type
}],
categoryAxis: {
field: "datetimedata",
majorGridLines: {
visible: false
},
majorTicks: {
visible:false
},
type: "date",
baseUnit: "minutes",
labels: {
dateFormats: {
minutes: "h tt"
},
step:180
}
},
valueAxis: {
majorGridLines: {
visible: true
},
majorTicks: {
visible:false
},
labels: {
visible: false
},
title: {
text: type,
font: "14px Arial,Helvetica,sans-serif"
},
visible: false
},
tooltip: {
visible: true,
template: '#=kendo.toString(new Date(dataItem.datetimedata),"g")# <br /> #=kendo.toString(Number(dataItem.' + type + '),"n2")# ' + type
}
});
}
}
var data=[{“intradayfifteennminuteactivitykey”：443124，“id”：“abcd”，“datetimedata”：“7/20/2014 4:15:00 AM”，“carriesout”：“17”，“distance”：“0”，“elevation”：“0”，“floors”：“0”，“steps”：“0”，“createddate”：“7/20/2014 12:00:00 AM”，“distance unit”：“Km”}，
{“IntraDayFifteenMinuteActivityKey”：443125，“id”：“abcd”，“datetimedata”：“7/20/2014 4:30:00 AM”，“热量输出”：“20”，“距离”：“0”，“标高”：“0”，“楼层”：“0”，“台阶”：“0”，“创建日期”：“7/20/2014 12:00:00 AM”，“距离单位”：“Km”}，
{“IntraDayFifteenMinuteActivityKey”：443126，“id”：“abcd”，“datetimedata”：“7/20/2014 4:45:00 AM”，“热量输出”：“17”，“距离”：“0”，“标高”：“0”，“楼层”：“0”，“台阶”：“0”，“创建日期”：“7/20/2014 12:00:00 AM”，“距离单位”：“Km”}，
{“IntraDayFifteenMinuteActivityKey”：443127，“id”：“abcd”，“datetimedata”：“7/20/2014 5:00:00 AM”，“热量输出”：“17”，“距离”：“0”，“标高”：“0”，“楼层”：“0”，“台阶”：“0”，“创建日期”：“7/20/2014 12:00:00 AM”，“距离单位”：“Km”}，
{“IntraDayFifteenMinuteActivityKey”：443128，“id”：“abcd”，“datetimedata”：“7/20/2014 5:15:00 AM”，“热量输出”：“17”，“距离”：“0.00442800018936396”，“标高”：“0”，“楼层”：“0”，“台阶”：“6”，“创建日期”：“7/20/2014 12:00:00 AM”，“距离单位”：“Km”}，
{“IntraDayFifteenMinuteActivityKey”：443129，“id”：“abcd”，“datetimedata”：“7/20/2014 5:30:00 AM”，“热量输出”：“17”，“距离”：“0”，“标高”：“0”，“楼层”：“0”，“台阶”：“0”，“创建日期”：“7/20/2014 12:00:00 AM”，“距离单位”：“Km”}]
$（“#日内数据图表”）。肯多卡特({
数据源：数据，
系列颜色：[颜色]，
图表区：{
背景：“”
},
标题：{
文本：“日内数据”，
字体：“14px Arial，Helvetica，无衬线粗体”
},
图例：{
可见：假，
},
图表区：{
背景：“”
},
系列默认值：{
键入：“列”，
覆盖：{
梯度：“无”
},
差距：.1
},
系列：[{
名称：type，
字段：类型
}],
类别：{
字段：“datetimedata”，
主要生产线：{
可见：假
},
少校：{
可见：假
},
键入：“日期”，
基本单位：“分钟”，
标签：{
日期格式：{
会议记录：“h tt”
},
步骤：180
}
},
valueAxis：{
主要生产线：{
可见：正确
},
少校：{
可见：假
},
标签：{
可见：假
},
标题：{
文本：类型，
字体：“14px Arial，Helvetica，无衬线”
},
可见：假
},
工具提示：{
可见：对，
模板：'#=kendo.toString（新日期（dataItem.datetimedata），“g”）#
#=kendo.toString（数字（dataItem.+type+），“n2”）#+type
}
});
}
}
要使图表线条变粗，需要减小系列中的间距
$("#chart").kendoChart({
series: [ {
gap: 0
}]
});
对于仅显示带有数据的时间，您必须将CategoryAxis定义为类型“category”，而不是类型“date”。当你把它定义为一个日期时，剑道将用空格填充所有缺失的数据点，这样看起来就对了。要想让它发挥作用，你可能需要将日期转换成可以按类别排序的日期 相反，你可以让剑道自动聚合你的数据，这样它会在一段时间内聚集在一起。您可以通过将CaregoryAxis中的baseUnit设置为“fit”来进行设置
$("#chart").kendoChart({
categoryAxis: {
baseUnit: "fit"
}
});