0

アプリケーションで剣道折れ線グラフを使用していますが、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>

4

1 に答える 1

0

剣道チャートの x 軸ラベルは、次の dataBound 関数で dataBound-event を使用して動的に調整できます。

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

于 2015-01-26T20:22:40.820 に答える