如何在 Kendo UI 图表上包装 categoryAxis 文本
Posted
技术标签:
【中文标题】如何在 Kendo UI 图表上包装 categoryAxis 文本【英文标题】：How can I wrap the categoryAxis text on Kendo UI charts 【发布时间】：2019-06-17 06:45:10 【问题描述】：我意识到在 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>
【问题讨论】：
您是否尝试过将标签旋转设置为“自动”：docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/… 这个想法是将标签包装在多行文本中。旋转也可以，但与原始设计不匹配。 【参考方案1】：解决方案位于 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]
]
);
【讨论】：
以上是关于如何在 Kendo UI 图表上包装 categoryAxis 文本的主要内容，如果未能解决你的问题，请参考以下文章