kendo ui - 条形图标签位置根据条件分配
kendo ui - barchart labels position assign depending on the conditions
我想根据条件分配条形图标签位置。
由于数据量的比例不同,在小数据时会出现标签被截断的现象。
当前标签的位置是"insideEnd"
。
如果status值为2,可以给outside end选项吗?
这是我的代码
function createExecutionToday(type) {
$("#" + type).kendoChart({
dataSource: {
transport: {
read: {
url: "dashboard/" + type + ".json",
dataType: "json"
}
},
schema: {
data: function(response) {
for (i in response) {
var status = response[i].status;
response[i].status = toKorean(status);
}
return response;
}
},
},
legend: {
visible: false
},
chartArea: {
border: {
width: 10,
color: "white"
},
margin: {
top: 40,
left: 20,
bottom: 30
},
background: "#ffffff",
},
seriesDefaults: {
type: "bar",
labels: {
visible: true,
position: "insideEnd",
template: "#if (value > 0) {# #: value # #}#",
font: "bold 12px arial",
background: "transparent"
},
overlay: null
},
series: [{
field: "count",
color: function(status) {
var colors = ["#DB7196", "#66CCFF", "#E5B055"];
return colors[status.index];
},
border: {
width: 0
}
}],
categoryAxis: {
categories: [success, running, check],
majorGridLines: {
visible: false
},
line: {
visible: false
},
labels: {
font: "bold 12px arial",
color: "black",
}
},
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
labels: {
visible: false
},
majorGridLines: {
visible: false
},
},
});
}
您可以使用标签的 Visual property 根据状态值甚至栏的宽度重新定位它。
labels: {
visible: true,
position: "insideEnd",
template: "#if (value > 0) {# #: value # #}#",
font: "bold 12px arial",
background: "transparent",
visual: function(e) {
if (e.dataItem.status == 2 || e.rect.size.width < 40){
var x = e.rect.origin.x + e.rect.size.width + 4;
var y = e.rect.origin.y + (e.rect.size.height - 12)/2;
return new kendo.drawing.Text(e.text, [x, y], {
font: "bold 12px arial",
fill: {
color: "black",
}
});
} else {
return e.createVisual();
}
}
},
注意:return e.createVisual();
绘制默认标签
DEMO
我想根据条件分配条形图标签位置。 由于数据量的比例不同,在小数据时会出现标签被截断的现象。
当前标签的位置是"insideEnd"
。
如果status值为2,可以给outside end选项吗?
这是我的代码
function createExecutionToday(type) {
$("#" + type).kendoChart({
dataSource: {
transport: {
read: {
url: "dashboard/" + type + ".json",
dataType: "json"
}
},
schema: {
data: function(response) {
for (i in response) {
var status = response[i].status;
response[i].status = toKorean(status);
}
return response;
}
},
},
legend: {
visible: false
},
chartArea: {
border: {
width: 10,
color: "white"
},
margin: {
top: 40,
left: 20,
bottom: 30
},
background: "#ffffff",
},
seriesDefaults: {
type: "bar",
labels: {
visible: true,
position: "insideEnd",
template: "#if (value > 0) {# #: value # #}#",
font: "bold 12px arial",
background: "transparent"
},
overlay: null
},
series: [{
field: "count",
color: function(status) {
var colors = ["#DB7196", "#66CCFF", "#E5B055"];
return colors[status.index];
},
border: {
width: 0
}
}],
categoryAxis: {
categories: [success, running, check],
majorGridLines: {
visible: false
},
line: {
visible: false
},
labels: {
font: "bold 12px arial",
color: "black",
}
},
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
labels: {
visible: false
},
majorGridLines: {
visible: false
},
},
});
}
您可以使用标签的 Visual property 根据状态值甚至栏的宽度重新定位它。
labels: {
visible: true,
position: "insideEnd",
template: "#if (value > 0) {# #: value # #}#",
font: "bold 12px arial",
background: "transparent",
visual: function(e) {
if (e.dataItem.status == 2 || e.rect.size.width < 40){
var x = e.rect.origin.x + e.rect.size.width + 4;
var y = e.rect.origin.y + (e.rect.size.height - 12)/2;
return new kendo.drawing.Text(e.text, [x, y], {
font: "bold 12px arial",
fill: {
color: "black",
}
});
} else {
return e.createVisual();
}
}
},
注意:return e.createVisual();
绘制默认标签