ui.igBaseChart

ui.igBaseChart_image
これは igSparkline、igFunnelChart、および igDoughnutChart の基本ウィジェットです。派生したウィジェットによって実装されるオプション、メソッド、イベント、および CSS クラスを含みます。継承する必要があります。 igBaseChart のコード例を使用する場合、「igBaseChart」を実際に使用するチャート ウィジェットと置き換えます。

コード サンプル

 
    // See specific members for more details or see derived widgets: igSparkline, 
    // igFunnelChart, or igDoughnutChart for implementation overview.

依存関係

継承

  • dataSource

    タイプ:
    object
    デフォルト:
    null

    有効なデータ ソースを取得または設定します。
    配列またはプリミティブのインスタンス、オブジェクトの配列、$.ig.DataSource のインスタンス、または $.ig.DataSource で有効なデータが可能です。
    注: これが文字列に設定され、「dataSourceType」オプションが設定されていない場合、$.ig.JSONPDataSource が使用されます。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    dataSource : data
});
 
//Get
var data = $(".selector").igBaseChart("option", "dataSource");

//Set
$(".selector").igBaseChart("option", "dataSource", data);

  • dataSourceType

    タイプ:
    string
    デフォルト:
    null

    データ ソースのタイプ (「json」、「xml」など) を取得または設定します。$.ig.DataSource とそのタイプ プロパティのドキュメントを参照してください。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    dataSourceType : "json"
});
 
//Get
var type = $(".selector").igBaseChart("option", "dataSourceType");

//Set
$(".selector").igBaseChart("option", "dataSourceType", "json");

  • dataSourceUrl

    タイプ:
    string
    デフォルト:
    null

    リモート データの要求で JSON を送信するために使用される URL を取得または設定します。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    dataSourceUrl : "http://myhost/data"
});
 
//Get
var url = $(".selector").igBaseChart("option", "dataSourceUrl");

//Set
$(".selector").igBaseChart("option", "http://myhost/data");

  • height

    タイプ:
    number
    デフォルト:
    null

    チャートの高さ。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    height : 500
});
 
//Get
var height = $(".selector").igBaseChart("option", "height");
 
//Set
$(".selector").igBaseChart("option", "height", 500);

  • maxRecCount

    タイプ:
    number
    デフォルト:
    0

    チャートに表示されるレコードの最大数を取得または設定します。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    maxRecCount : 100
});
 
//Get
var count = $(".selector").igBaseChart("option", "maxRecCount");
 
//Set
$(".selector").igBaseChart("option", "maxRecCount", 100);

  • responseDataKey

    タイプ:
    string
    デフォルト:
    null

    $.ig.DataSource を参照してください。応答がラップされる場合、これは基本的に、データ レコードが保持される応答内のプロパティです。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    responseDataKey : "d.results"
});
 
//Get
var key = $(".selector").igBaseChart("option", "responseDataKey");
 
//Set
$(".selector").igBaseChart("option", "responseDataKey", "d.results");

  • responseTotalRecCountKey

    タイプ:
    string
    デフォルト:
    null

    $.ig.DataSource を参照してください。サーバー上のレコードの総数を指定する応答内のプロパティ。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    responseTotalRecCountKey : "total"
});
 
//Get
var key = $(".selector").igBaseChart("option", "responseTotalRecCountKey");
 
//Set
$(".selector").igBaseChart("option", "responseTotalRecCountKey", "total");

  • tooltipTemplate

    タイプ:
    string
    デフォルト:
    null

    チャート項目に関連付けるツールチップのテンプレートを取得または設定します
    例: "Value: $(ValueMemberPathInDataSource)"。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    tooltipTemplate : "High: ${High}"
});
 
//Get
var template = $(".selector").igBaseChart("option", "tooltipTemplate");
 
//Set
$(".selector").igBaseChart("option", "tooltipTemplate", "High: ${High}");

  • width

    タイプ:
    number
    デフォルト:
    null

    チャートの幅。

    コード サンプル

     
//Initialize
$(".selector").igBaseChart({
    width : 500
});
 
//Get
var width = $(".selector").igBaseChart("option", "width");
 
//Set
$(".selector").igBaseChart("option", "width", 500);

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

  • dataBinding

    キャンセル可能:
    true

    データ バインド前に発生するイベント。
    データ バインディングをキャンセルするには、false を返します。
    関数は最初の引数に null を、2 番目の引数に ui を取ります。
    チャート ウィジェットへの参照を取得するために ui.owner を使用します。
    $.ig.DataSource のインスタンスへの参照を取得するために ui.dataSource を使用します。

    コード サンプル

     
//Delegate
$(document).delegate(".selector", "igbasechartdatabinding", function (evt, ui) {
    // Get reference to igBaseChart.
    ui.owner;
    
    // Get reference to instance of $.ig.DataSource.
    ui.dataSource;
});
 
//Initialize
$(".selector").igBaseChart({
    dataBinding: function(evt, ui) {...}
});

  • dataBound

    キャンセル可能:
    false

    データ バインド後に発生するイベント。
    関数は最初の引数に null を、2 番目の引数に ui を取ります。
    チャート ウィジェットへの参照を取得するために ui.owner を使用します。
    チャートで表示される実際のデータを配列するために参照を取得します。
    $.ig.DataSource のインスタンスへの参照を取得するために ui.dataSource を使用します。

    コード サンプル

     
//Delegate
$(document).delegate(".selector", "igbasechartdatabound", function (evt, ui) {
    // Get reference to igBaseChart.
    ui.owner;
    
    // Get reference to igBaseChart's array data.
    ui.data;
    
    // Get reference to instance of $.ig.DataSource.
    ui.dataSource;
});
 
//Initialize
$(".selector").igBaseChart({
    dataBound: function(evt, ui) {...}
});

  • hideTooltip

    キャンセル可能:
    true

    ツールチップが非表示になる前に発生されるイベント。
    ツールチップの非表示をキャンセルして表示するために false を返します。
    関数は最初の引数に null を、2 番目の引数に ui を取ります。
    チャート ウィジェットへの参照を取得するために ui.owner を使用します。
    項目への参照を取得するために ui.item を使用します。
    前回のTooltip イベントの更新またはツールチップから ui.element 値を表す jquery オブジェクトへの参照を取得するために ui.element を使用します。カスタム要素で置き換えられるメンバーの値。

    コード サンプル

     
//Delegate
$(document).delegate(".selector", "igbasecharthidetooltip", function (evt, ui) {
    // Get reference to igBaseChart.
    ui.owner;
    
    // Get reference to the data object.
    ui.item;
    
    // Get or set the jQuery object representing the tooltip.
    ui.element;
});
 
//Initialize
$(".selector").igBaseChart({
    hideTooltip: function(evt, ui) {...}
});

  • updateTooltip

    キャンセル可能:
    true

    ツールチップが更新される前に発生されるイベント。
    ツールチップの更新および非表示をキャンセルするために false を返します。
    関数は最初の引数に null を、2 番目の引数に ui を取ります。
    チャート ウィジェットへの参照を取得するために ui.owner を使用します。
    ツールチップの html を取得するために ui.text を使用します。変更可能なメンバーの値。変更された値が null または空値の場合、現在のツールチップ コンテンツは古い値を保持します。
    項目への参照を取得するために ui.item を使用します。変更可能またはカスタム項目で置き換えられるメンバーの値。
    ウィジェットに関連するツールチップの左位置をピクセルで取得するために ui.x を使用します。変更可能なメンバーの値。
    ウィジェットに関連するツールチップの上位置をピクセルで取得するために ui.x を使用します。変更可能なメンバーの値。
    ツールチップを表す jquery オブジェクトへの参照を取得するための ui.element を使用します。カスタム要素で置き換えられるメンバーの値。

    コード サンプル

     
//Delegate
$(document).delegate(".selector", "igbasechartupdatetooltip", function (evt, ui) {
    // Get reference to igBaseChart.
    ui.owner;
    
    // Get or set the tooltip HTML.
    ui.text;
    
    // Get reference to the data object.
    ui.item;
    
    // Get or set the tooltip's left position relative to the widget in pixels.
    ui.x;
    
    // Get or set the tooltip's top position relative to the widget in pixels.
    ui.y;
    
    // Get or set the jQuery object representing the tooltip.
    ui.element;
});
 
//Initialize
$(".selector").igBaseChart({
    updateTooltip: function(evt, ui) {...}
});

  • addItem

    .igBaseChart( "addItem", item:object );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    新しい項目をデータ ソースに追加し、チャートに通知します。

    • item
    • タイプ:object
    • データ ソースに追加する必要がある項目。

    コード サンプル

     
$(".selector").igBaseChart("addItem", dataItem);

  • chart

    .igBaseChart( "chart" );
    返却型:
    object
    返却型の説明:
    チャートへの参照を返します。

    チャート オブジェクトへの参照を取得します。

    コード サンプル

     
// Not intended for use with derived widget       
var chart = $(".selector").igBaseChart("chart");

  • dataBind

    .igBaseChart( "dataBind" );

    データをチャートにバインドします。

    コード サンプル

     
$(".selector").igBaseChart("dataBind");

  • destroy

    .igBaseChart( "destroy" );

    ウィジェットを破棄します。

    コード サンプル

     
$(".selector").igBaseChart("destroy");

  • findIndexOfItem

    .igBaseChart( "findIndexOfItem", item:object );
    返却型:
    number
    返却型の説明:
    -1 または項目のインデックスを返します。

    チャートに使用される実際のデータ内の項目のインデックスを検索します。

    • item
    • タイプ:object
    • 項目への参照。

    コード サンプル

     
var index = $(".selector").igBaseChart("findIndexOfItem", item);

  • flush

    .igBaseChart( "flush" );

    続行の前に保留中の作業をチャートで描画するように強制します。

  • getData

    .igBaseChart( "getData" );
    返却型:
    array
    返却型の説明:
    null またはデータへの参照を返します。

    チャートに使用される実際のデータへの参照を取得します。

    コード サンプル

     
var data = $(".selector").igBaseChart("getData");

  • getDataItem

    .igBaseChart( "getDataItem", index:object );
    返却型:
    object
    返却型の説明:
    null またはデータ項目への参照を返します。

    チャートに使用される実際のデータの項目を取得します。this.getData()[インデックス] のようです。

    • index
    • タイプ:object
    • データ項目のインデックス。

    コード サンプル

     
var item = $(".selector").igBaseChart("getDataItem", 0);

  • insertItem

    .igBaseChart( "insertItem", item:object, index:number );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    新しい項目をデータ ソースに挿入し、チャートに通知します。

    • item
    • タイプ:object
    • データ ソースに挿入する必要がある新規項目。
    • index
    • タイプ:number
    • 新しい項目が挿入されるデータ ソースのインデックス。

    コード サンプル

     
var chart = $(".selector").igBaseChart("insertItem", item, 9);

  • notifyClearItems

    .igBaseChart( "notifyClearItems", dataSource:object );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    項目が関連付けられたデータ ソースからクリアされたことをチャートに通知します。
    同じ項目のソースを共有しているかどうか、変更の複数のターゲットに通知する必要はありません。

    • dataSource
    • タイプ:object
    • 変更が発生したデータ ソース。

    コード サンプル

     
var chart = $(".selector").igBaseChart("notifyClearItems", dataSource);

  • notifyInsertItem

    .igBaseChart( "notifyInsertItem", dataSource:object, index:number, newItem:object );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    項目がそのデータ ソースの指定されたインデックスに挿入されたことを対象の軸またはシリーズに通知します。
    同じ項目のソースを共有しているかどうか、変更の複数のターゲットに通知する必要はありません。

    • dataSource
    • タイプ:object
    • 変更が発生したデータ ソース。
    • index
    • タイプ:number
    • 新しい項目が挿入された項目ソースのインデックス。
    • newItem
    • タイプ:object
    • コレクションに設定された新しい項目。

    コード サンプル

     
var chart = $(".selector").igBaseChart("notifyInsertItem", dataSource, 9, newItem);

  • notifyRemoveItem

    .igBaseChart( "notifyRemoveItem", dataSource:object, index:number, oldItem:object );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    項目がそのデータ ソースの指定されたインデックスから削除されたことを対象の軸またはシリーズに通知します。
    同じ項目のソースを共有しているかどうか、変更の複数のターゲットに通知する必要はありません。

    • dataSource
    • タイプ:object
    • 変更が発生したデータ ソース。
    • index
    • タイプ:number
    • 旧項目の削除元となった項目ソースのインデックス。
    • oldItem
    • タイプ:object
    • コレクションから削除された旧項目。

    コード サンプル

     
var chart = $(".selector").igBaseChart("notifyRemoveItem", dataSource, 0, oldItem);

  • notifySetItem

    .igBaseChart( "notifySetItem", dataSource:object, index:number, newItem:object, oldItem:object );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    項目が関連付けられたデータ ソースに設定されたことをチャートに通知します。

    • dataSource
    • タイプ:object
    • 変更が発生したデータ ソース。
    • index
    • タイプ:number
    • 変更された項目ソースのインデックス。
    • newItem
    • タイプ:object
    • コレクションに設定された新しい項目。
    • oldItem
    • タイプ:object
    • コレクションで上書きされた旧項目。

    コード サンプル

     
var chart = $(".selector").igBaseChart("notifySetItem", dataSource, 0, newItem, oldItem);

  • removeItem

    .igBaseChart( "removeItem", index:number );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    項目をデータ ソースから削除し、チャートに通知します。

    • index
    • タイプ:number
    • 項目が削除されるデータ ソースのインデックス。

    コード サンプル

     
var chart = $(".selector").igBaseChart("removeItem", 0);

  • setItem

    .igBaseChart( "setItem", index:number, item:object );
    返却型:
    object
    返却型の説明:
    このチャートへの参照を返します。

    データ ソース内の項目を更新し、チャートに通知します。

    • index
    • タイプ:number
    • 変更する必要があるデータ ソース内の項目のインデックス。
    • item
    • タイプ:object
    • データ ソース内で設定する新規項目オブジェクト。

    コード サンプル

     
var chart = $(".selector").igBaseChart("setItem", 0, item);

  • ui-widget-content ui-corner-all

    ツールチップ要素に適用されるクラスを取得します。

  • ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5

    チャートを HTML5 と互換性のないブラウザーで開いたときに表示されるメイン要素に適用されるクラスを取得します。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.