Question

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

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

以下是我的代码：

＆＃13;

<!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>

＆＃13;

Answer 1

可以使用带有以下dataBound函数的dataBound-event动态调整Kendo图表的x轴标签。

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;
    }    
}

查看完整演示 - ＆gt; JSFIDDLE

Html Kendo折线图x轴标签重叠

1 个答案: