我意识到在 kendo ui 图表上使用长文本名称作为 categoryAxisValues 文本将重叠并显示在彼此之上。我尝试检查文档以寻找可以修复它但显然不存在或我找不到的属性。 这是从 Telerik 页面获取的示例:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bar-charts/column">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
}, {
name: "Germany",
data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
},{
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: ["2sdsdsfs sdf sffd002", "200sdfsf fddf sd fs3", "200sd sfsdf sdf4", "20sdf dfsdfsdfsf05", "20sd sdfsdfs06", "20sd dsfsdf07", "200sdf sdfdfsfsdf8", "2sdf sdfsdf009", "201sd fsdfsfd0", "201s ddfsdfdf1"],
line: {
visible: false
},
labels: {
padding: {top: 135}
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
最佳答案
解决方案在 Telerik 的文档中。 https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels
$("#chart").kendoChart({
categoryAxis: {
categories: ["foo bar"],
labels: {
visual: function(e) {
var rect = new kendo.geometry.Rect(e.rect.origin, [e.rect.size.width, 100]);
var layout = new kendo.drawing.Layout(rect, {
orientation: "vertical",
alignContent: "center"
});
var words = e.text.split(" ");
for (var i = 0; i < words.length; i++) {
layout.append(new kendo.drawing.Text(words[i]));
}
layout.reflow();
return layout;
}
}
},
series: [{
data: [1]
}]
});
关于jquery - 如何在 Kendo UI 图表上包装 categoryAxis 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54331275/