如何在Kendo UI图表中使条形更厚？

Question

我的图表有卡路里与时间数据。每15分钟卡路里的价值。我想让酒吧更接近。我发布了一个数据样本，还有一个指向jsFiddle的链接。此外，是否可以在图表上显示整个24小时，并仅显示具有值的那些......

  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
                        }
                    });
                }
            }

Link to Fiddle

Answer 1

要使图表线更粗，您需要缩小系列中的间隙。

$("#chart").kendoChart({
  series: [ {
    gap: 0
  }]
});

以下是API参考 http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-series.gap

他们还有一个如何动态执行此操作的教程。 http://demos.telerik.com/kendo-ui/bar-charts/gap-spacing

---

要仅显示数据时间，您必须将CategoryAxis定义为类型＆＃39;类别＆＃39;而不是类型＆＃39; date＆＃39;。当您将其定义为日期时，剑道将使用空白填充所有缺失的数据点，以使其看起来正确。为此，您可能需要将日期转换为可以作为类别排序的日期。

你可以让kendo自动聚合你的数据，这样它就会把时间合在一起。您可以通过将CaregoryAxis中的baseUnit设置为＆＃39; fit＆＃39;

来设置此项

$("#chart").kendoChart({
  categoryAxis: {
    baseUnit: "fit"
  }
});