Html Kendo 折线图 x 轴标签重叠答案

【问题标题】：Html Kendo line chart x- axis labels overlapingHtml Kendo 折线图 x 轴标签重叠
【发布时间】：2015-01-21 12:34:56
【问题描述】：

我在我的应用程序中使用剑道折线图，x 轴值/标签重叠。 xAxis.labels.step 属性在我的情况下不起作用，因为 categoryaxis 绑定到可以包含以天/月/年为单位的日期差异的数据源。如何避免重叠？

我已经使用轮换来解决这个问题，但是还有其他方法吗？

下面是我的代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Kendo UI Snippet</title>

	<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
	<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
	<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css">
	<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css">
	<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css">

	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>

<body>

	<div id="chart"></div>
	<script>
		var seriesData = [
			{
				year: new Date(Date.parse("12/12/2011")),
				value: 1
			},
			{
				year: new Date(Date.parse("13/12/2012")),
				value: 3
			},
			{
				year: new Date(Date.parse("23/12/2012")),
				value: 4
			}
    ];
		$("#chart").kendoChart({
			categoryAxis: {
				min: new Date("12/1/2011"),
				max: new Date("23/12/2012"),
				baseUnit: "days",
				type: "date",
				field: "year",

				labels: {
					dateFormats: {
						days: "MM/dd/yy"
					},
				}
			},
			chartArea: {
				width: 300,
				height: 200
			},
			series: [
				{
					field: "value",
					type: "line"
				}
  ],
			dataSource: {
				data: seriesData
			}
		});
	</script>
</body>

</html>

【问题讨论】：

标签： kendo-ui kendo-chart

【解决方案1】：

剑道图的x轴标签可以通过dataBound-event和下面的dataBound函数动态调整。

function dataBound(e) {
    var chart = $("#chart").data("kendoChart");
    if (seriesData.view().length > 2) {
        chart.options.categoryAxis.labels.step = 5;
    }
    else {
        chart.options.categoryAxis.labels.step = 1;
    }    
}

查看完整演示 -> JSFIDDLE

【讨论】：