Ignite UI™ API ヘルプ

ui.igBaseChart

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

コードサンプル

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

依存関係

継承

jQuery.widget

詳細の表示

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 と互換性のないブラウザーで開いたときに表示されるメイン要素に適用されるクラスを取得します。

Ignite UI for jQuery | API リファレンス

ui.igBaseChart

コード サンプル

依存関係

継承

コードサンプル