[英]Using KendoUI Pie Chart, How do you remove white space?
我正在使用KendoUI饼图,并且空白很多。 删除它的最佳方法是什么。 见下图:
我的Java脚本如下所示:
<div id="divGraph1" style="width:250px; height:250px;"/>
jQuery("#divGraph1").kendoChart({
legend:{
position: "bottom",
padding: 1,
margin: 1
},
seriesDefaults:{
labels:{
visible: true,
template: "#= kendo.format('{0:P}', percentage)#"
},
visible: true
},
tooltip:{
visible: true,
template: "#= category # - #= kendo.format('{0:P}', percentage)#"
},
seriesColors: [
"#004990", "#da7633", "#8a7967", "#8b0f04", "#ead766", "#676200", "78496a"
],
title: {
padding: 1,
margin: 1
},
chartArea: { margin: 1 },
plotArea: { margin: 1 },
series:[{
type: "pie",
data: [
{ category: "Facilities in IDN", value: 3 },
{ category: "Standalone Facilities", value: 4 }
]
}]
});
任何建议将不胜感激。
您可以提供容器元素的宽度吗? 我可以提供一个更准确的答案。
根据您的图片,我正在显示它的宽度约为475像素。 有一个可用的高度配置选项,您可以使用它来缩小尺寸。 它需要一个整数(以像素为单位)。
jQuery("#divGraph1").kendoChart({
legend:{
position: "bottom",
padding: 1,
margin: 1
},
seriesDefaults:{
labels:{
visible: true,
template: "#= kendo.format('{0:P}', percentage)#"
},
visible: true
},
tooltip:{
visible: true,
template: "#= category # - #= kendo.format('{0:P}', percentage)#"
},
seriesColors: [
"#004990", "#da7633", "#8a7967", "#8b0f04", "#ead766", "#676200", "78496a"
],
title: {
padding: 1,
margin: 1
},
chartArea: {
margin: 1,
height:300 /* add this option */
},
plotArea: { margin: 1 },
series:[{
type: "pie",
data: [
{ category: "Facilities in IDN", value: 3 },
{ category: "Standalone Facilities", value: 4 }
]
}]
});
如果您不喜欢在选项中传递布局信息(我不喜欢!),Kendo将从您用来保存图表的div继承CSS。 以下HTML将图表限制为475x300。
<div id='divGraph1' style='width:475px;height300px'></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.