igZoombar が、ズームをサポートするデータ ビジュアライゼーション コンポーネントをインターフェイスにより続行できます。
このトピックは、igZoombar™ の拡張性オプションについての情報を提供します。「provider」と呼ばれるカスタム インターフェイスによりサード パーティのオープンソース チャートをズームするためにウィジェットを使用する方法を紹介します。
本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。
igZoombar™ コントロールの概念的な情報を説明し、このコントロールがサポートするユーザー インタラクションや基本構成などを含む機能を紹介します。igZoombar™ コントロールを HTML ページおよび ASP.NET MVC アプリケーションに追加する方法を説明します。igZoombar™ コントロールのズーム ウィンドウを構成する方法を説明します。このトピックは、以下のセクションで構成されます。
igZoombar は、ズーム オプションを提供する各 JavaScript コンポーネントと動作する機能があります。初期化と通信は、カスタム コントロールをサポートするために拡張可能なインターフェイスを介して処理されます。インターフェイスはクローン ウィジェット (ズームバー ウィジェット内に描画するズーム コンポーネントのより小さなコピー) を作成し、ズームアクションをアタッチされたコンポーネントへ送信します。次にズームがコンポーネント自身の UI または API を介して変更されるときに通知を受け取り UI を更新します。インターフェイスまたは基本 $.ig.igZoombarProviderDefault への拡張などがズームバーによって初期化、または provider オプションを使用して直接インスタンスとして渡すことができます。
カスタム プロバイダーは、基本クラス $.ig.igZoombarProviderDefault で利用可能なすべてのメソッドを実装する必要があります。名前のみが igZoombar へ渡される場合は、同じ名前スペースで定義する必要があります (Ignite UI for MVC Zoombar を使用する場合に推奨されるオプション)。
各メソッドの概要:
init - exit でプロバイダーインスタンスを返すコンストラクター。デフォルト実装は渡したオプションを設定プロパティに割り当てます。clean - igZoombar がプロバイダー インスタンスを削除する直前に呼ばれるメソッド。必要なクリーンアップの実行をクローンまたはターゲット コンポーネントで使用できます。getBaseOpts - igZoombar は、初期化でコンポーネントがアタッチされる有効なオプション セットを取得するためにこれを呼び出します。ウィジェットは戻り値は使用しませんが、その後のプロバイダーへ戻る処理のために渡します。cleanOptsForZoom - 基本オプションを取得した後に igZoombar がこのメソッドの変更を前提として呼び出すことにより、ズーム UI 内のクローン コンポーネントを描画するために使用できます。変更の例としてグリッド線、軸、ラベル、ツールチップ、ズーム操作の削除があります。クローン コンポーネントがフィットするコンテナーの幅と高さは、オプションオブジェクトの最上位のプロパティとして igZoombar によって追加されます。createClone - クローン コンポーネントを初期化して描画します。igZoombar は 2 つのパラメーターでそれを呼び出し、クローンを初期化するためのコンテナーと getBaseOpts および cleanOptsForZoom 関数を介して最初に渡されるオプション。 widgetName - ターゲット コンポーネントの名前を返します。ほとんどの場合除外できます。targetWidth - ターゲット コンポーネントの幅を返します。igZoombar オプション width が auto に設定された場合に呼び出され、igZoombar はコンポーネントがズームされた同じ幅で描画されます。syncMinWidth - igZoombar の zoomWindowMinWidth プロパティに対応するターゲット コンポーネントのプロパティ(がある場合) を同期します。setSize - igZoombar はパラメーターの幅と高さと共にこれを呼び出し、初期化後にクローン コンポーネントのディメンションを変更します。その後、API 呼び出しまたはレスポンシブウェブ デザイン関連のサイズ変更のいずれかによるサイズ変更のたびに応答します。targetObject - ターゲット コンポーネントのインスタンスを取得または設定します。igZoombar はインスタンス自身をカスタムプロバイダーに設定しません。プロバイダー インスタンス自身を作成する必要がある場合、プロバイダー providerCreatedイベントを処理することによりそれ以降ターゲット インスタンスの設定に使用できます。update - 新しいズーム構成をターゲット コンポーネントに設定します。igZoombar は 2 つのパラメーター (ズームバーの合計幅の割合を表す新しいズーム範囲の右と左の 0 から 1 の数値) を渡します。ベース プロバイダーは設定オブジェクトに 2 つのプロパティがあり、コンストラクターによって割り当てられます。
targetObject - ターゲット コンポーネントのインスタンス。公式にサポートされるウィジェットでプロバイダーが自動的に決定される場合のみ igZoombar によって設定されます。zoomChangedCallback - ズーム範囲がターゲットコンポーネント自身の UI または API によって変更されるときに実行されるコールバック。この設定は igZoombar で自動的に設定されます。コールバック関数は 2 つのパラメーターが必要です。
event - igZoombar によって発生した zoomChanging/zoomChanged イベントのオリジナルとして渡すイベント。適用できない場合 nullを渡します。details - 以下の構造のオブジェクト: {
oldLeft: number,
oldWidth: number,
newLeft: number,
newWidth: number
}
値はズームされたコンポーネントの全幅に対する割合を 0 から 1 の数値で表します。プレフィックス new のあるプロパティのみが必須です。残りは Zoombar イベント引数でのみ使用されます。
カスタム プロバイダーの割り当ては、provider オプションでのみ可能です。デフォルトで igZoombar は $.ig.ZoombarProviderDataChart のインスタンスを作成し、target オプションに渡された要素で初期化された igDataChart と連動します。カスタム プロバイダーを使用するには、参照を作成したインターフェイス クラスに渡します。igZoombar がそのインスタンスを作成する際に、ウィジェットがプロバイダーの使用を開始する前にユーザー固有のコードの実行を可能とするイベント引数の一部のインスタンスと共に providerCreated イベントを発生します。
上記の情報を使用し、igZoombar を人気のオープンソース チャーティング ソリューション ChartJS に統合する方法をコード例で示します。ここではシンプルにするために水平時間軸のズームのみ許可します。
はじめにプロバイダーがインスタンスとなるクラスを定義します。
JavaScript の場合:
$.ig.ZoombarProviderChartJS = $.ig.ZoombarProviderChartJS ||
$.ig.ZoombarProviderDefault.extend({
});
次に継承関数にオーバーライドを追加していきます。
JavaScript の場合:
getBaseOpts: function (options) {
return this.settings.baseOptions;
},
cleanOptsForZoom: function (options) {
var o = options.options, i;
o.legend.display = false;
o.title.display = false;
for (i = 0; i < o.scales.xAxes.length; i++) {
o.scales.xAxes[i].display = false;
}
return options;
},
getBaseOpts は baseOptions 設定がコンストラクターへ渡されることを前提とします。cleanOptsForZoom は、タイトル、凡例、軸からクローン チャートをクリーンし、シンプルなターゲット チャートを示します。
JavaScript の場合:
createClone: function (container, options) {
var canvas;
this.settings.container = container;
this.setSize(options.width, options.height);
canvas = $("<canvas></canvas>").appendTo(container);
window.myZoomLine = new Chart(canvas[0].getContext("2d"), options);
return container;
},
igZoombar はクローン コンポーネントおよび関数によって最初に変更されたオプションのために作成するコンテナーを渡します。createClone はコンテナーをその後も使用できるよう保存します。キャンバスをその中に追加し、キャンバスの 2d コンテキストおよび受け取るオプションを使用してインスタンスを作成します。
JavaScript の場合:
setSize: function (width, height) {
this.settings.container.css({
width: width,
height: height
});
},
ChartJS はコンテナーで利用可能なスペースを埋めることにより、幅と高さを jQuery.css 呼び出しで設定できます。
JavaScript の場合:
update: function (a, b) {
var scaleName, scale,
chartInstance = this.settings.targetObject, options;
for (scaleName in chartInstance.scales) {
if (chartInstance.scales.hasOwnProperty(scaleName) && scaleName.startsWith("x")) {
scale = chartInstance.scales[scaleName];
options = scale.options;
if (!this.scale) {
this.scale = {
ft: scale.firstTick,
lt: scale.lastTick
}
}
scale.firstTick = this.scale.ft;
scale.lastTick = this.scale.lt;
options.time.min = scale.getValueForPixel(
(scale.getPixelForValue(this.scale.lt) - scale.getPixelForValue(this.scale.ft)) * a
);
options.time.max = scale.getValueForPixel(scale.getPixelForValue(this.scale.lt) * b);
chartInstance.update(0);
}
}
return true;
},
関数は ChartJS に表示する最小と最大の時間を設定します。
ズームするチャートとズームバーを作成し、providerCreated を処理して必要なオプションを渡します。
JavaScript の場合:
window.onload = function () {
var ctx = $("#canvas")[0].getContext("2d");
window.myLine = new Chart(ctx, config);
$("#zoombar").igZoombar({
provider: $.ig.ZoombarProviderChartJS,
target: $("#canvas"),
providerCreated: function (evt, ui) {
ui.provider.settings.baseOptions = $.extend(true, {}, config);
ui.provider.settings.targetObject = window.myLine;
}
});
};
既定の ChartJS ではズームできないため、この特定のユースケースではズームに関する情報をコールバックする必要はありません。
チャートとズームバーが含まれる全サンプルは、このページの最後にあるリンクから取得できます。
このトピックに関連する追加情報については、以下のトピックを参照してください。
アクセシビリティの遵守 (igZoombar): このトピックは、igZoombar コントロールのアクセシビリティ機能を説明し、このコントロールを含むページのアクセシビリティ遵守を実現する方法に関する情報を提供します。
既知の問題と制限 (igZoombar): このトピックでは、igZoombar コントロールの既知の問題点および制限事項、その回避策について説明します。
jQuery および MVC API リファレンス リンク (igZoombar): このトピックでは、igZoombar コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。
このトピックについては、以下のサンプルも参照してください。
igZoombar を ChartJS コントロールに統合しています。オンラインで表示: GitHub