[英]How to reduce the size of the KendoUI Pie Chart?
你如何减少KendoUI饼图的大小? 我正在使用饼图使用以下配置。 我已将边距设置为1像素,并将填充设置为1像素,但它似乎对饼图的呈现方式没有任何影响。 我没有头衔,但仍然有一个标题空间。 我希望能够缩小图表顶部与图例和实际图表之间的空间。
我的配置:
jQuery("#chart").kendoChart({
// theme: jQuery(document).data("kendoSkin") || "Metro",
legend: {
position: "bottom",
padding: 1,
margin: 1
},
seriesDefaults: {
labels: {
visible: true,
template: "${ value }%"
}
},
dataSource: {
data: <%=ChartData%>
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
tooltip: {
visible: false,
template: "${ category } - ${ value }%"
},
title: { padding: 1, margin: 1 },
seriesColors: ["#d15400", "#19277e", "#e2935e", "#d2d2d2"],
chartArea: { margin: 1 },
plotArea: { margin: 1 }
});
饼图默认为60px padding
。 如果您需要减少饼图周围的空间,则需要更改该填充。
...
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
padding: 0
}]
...
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Samplet"
},
seriesDefaults: {
labels: {
template: "#= kendo.format('{0:P}', percentage)#",
visible: true
}
},chartArea: {
width: 300,
height: 300
},
series: [{
type: "pie",
data: [{
category: "Quality",
value: 80},
{
category: "Time",
value: 20},
{
category: "Cost",
value: 40}]}],
tooltip: {
visible: true,
template: "#= kendo.format('{0:P}', percentage)#"
}
});
在这里我们在chartarea中定义一个属性来调整饼图的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.