[英]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.