このサンプルでは、チャートのドリルダウン機能を使用する方法を示します。

クライアント側の click イベントをチャートに連結する必要があります。JavaScript コードは次のとおりです。

var chartClientId = "#<%=C1BarChart1.ClientID%>";
$(document).ready(function () {
	var drawBrands = function (e, data) {
		$(chartClientId).c1barchart("option", "click", drawVersions);
		$(chartClientId).c1barchart("option", "seriesList", seriesList);
	}

	var drawVersions = function (e, data) {
		var key = data.x, series = drillDwonData[key];
		$(chartClientId).c1barchart("option", "click", drawBrands);
		$(chartClientId).c1barchart("option", "seriesList", [series]);
	}

	$(chartClientId).c1barchart("option", "click", drawVersions);
});

Test the features

• 列をクリックすると、選択した製品の詳細が表示されます。
• 詳細ビューで、もう一度列をクリックすると、元に戻ります。
• y 軸の割合はチャートの値に応じて変化します。