ui.igCategoryChart

ui.igCategoryChart_image

igCategoryChart は軽量で高パフォーマンスなチャートです。このチャートは、簡易な API を使用してカテゴリ データを表示するために構成できます。データ (コレクションまたはコレクションのコレクション) をバインドした後、チャートは構成を実行します。

以下のコード スニペットは、igCategoryChart コントロールを初期化する方法を示します。

igCategoryChart コントロールに必要なスクリプトとテーマを参照する方法については、Ignite UI の JavaScript リソースの使用および Ignite UI のスタイリングとテーマをご覧ください。

コード サンプル

 
<!DOCTYPE html>
<html>
<head>
    <title>Ignite UI igCategoryChart</title>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.dv.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(function () {
			var tabularData = [
				{ "Label": "1995", "Brazil": 161, "Indonesia": 197, "United States": 266, "India": 920, "China": 1297 },
				{ "Label": "2005", "Brazil": 186, "Indonesia": 229, "United States": 295, "India": 1090, "China": 1216 },
				{ "Label": "2015", "Brazil": 204, "Indonesia": 256, "United States": 322, "India": 1251, "China": 1361 },
				{ "Label": "2025", "Brazil": 218, "Indonesia": 277, "United States": 351, "India": 1396, "China": 1394 }];
			tabularData.__dataIntents = new Array();
			tabularData.__dataIntents["Brazil"] = ["DontPlot"];

			$("#chart").igCategoryChart({
				dataSource: tabularData
			});
        });
	</script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery.js
jquery-ui.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.templating.js
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_core.js
infragistics.dv_datasource.js
infragistics.dv_dataseriesadapter.js
infragistics.dv_geometry.js
infragistics.dv_jquerydom.js
infragistics.datachart_core.js
infragistics.datachart_categorycore.js
infragistics.dvcommonwidget.js
infragistics.datachart_category.js
infragistics.categorychart.js
infragistics.ui.widget.js
infragistics.ui.basechart.js
infragistics.ui.categorychart.js

継承

  • alignsGridLinesToPixels

    タイプ:
    bool
    デフォルト:
    true

    グリッドと目盛線がデバイス ピクセルに調整されるかどうかを示す値を取得または設定します。

  • bottomMargin

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

    チャート コンテンツの周囲の下マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	bottomMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "bottomMargin");
        
// Set
$(".selector").igCategoryChart("option", "bottomMargin", 20);

  • brushes

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

    チャート シリーズの色設定に使用するブラシのパレットを取得または設定します。提供された値は、CSS 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。
    提供された値は、css 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	brushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
        
// Get
var brushes = $(".selector").igCategoryChart("option", "brushes");
        
// Set
$(".selector").igCategoryChart("option", "brushes", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • chartType

    タイプ:
    enumeration
    デフォルト:
    line

    データから生成するチャート シリーズの型を取得または設定します。

    メンバー

    • line
    • タイプ:string
    • 各データ ポイントにマーカーがあるカテゴリ折れ線シリーズを指定します。
    • area
    • タイプ:string
    • カテゴリ エリア シリーズを指定します。
    • column
    • タイプ:string
    • 各データ ポイントに垂直矩形があるカテゴリ柱状チャートを指定します。
    • point
    • タイプ:string
    • 各データ ポイントにマーカーがあるカテゴリ ポイント チャートを指定します。
    • stepLine
    • タイプ:string
    • カテゴリ ステップ折れ線チャートを指定します。
    • stepArea
    • タイプ:string
    • カテゴリ ステップ エリア チャートを指定します。
    • spline
    • タイプ:string
    • 各データ ポイントにマーカーがあるカテゴリ スプライン折れ線シリーズを指定します。
    • splineArea
    • タイプ:string
    • カテゴリ スプライン エリア シリーズを指定します。
    • waterfall
    • タイプ:string
    • カテゴリ ウォーターフォール チャートを指定します。
    • auto
    • タイプ:string
    • データ アダプターからの提案に基づいてチャート タイプの自動選択を指定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	chartType: "area"
});
        
// Get
var chartType = $(".selector").igCategoryChart("option", "chartType");
        
// Set
$(".selector").igCategoryChart("option", "chartType", "area");

  • createWrappedTooltip

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

  • dataSource
    継承

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

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

    コード サンプル

     
// Given the following data...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	dataSource: data1
});
        
// Get
var dataSource = $(".selector").igCategoryChart("option", "dataSource");
        
// Set
$(".selector").igCategoryChart("option", "dataSource", data1);

  • dataSourceType
    継承

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

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

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	dataSourceType: "array"
});
        
// Get
var dataSourceType = $(".selector").igCategoryChart("option", "dataSourceType");
        
// Set
$(".selector").igCategoryChart("option", "dataSourceType", "array");

  • dataSourceUrl
    継承

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

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

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	dataSourceUrl: "http://www.example.com"
});
        
// Get
var dataUrl = $(".selector").igCategoryChart("option", "dataSourceUrl");
        
// Set
$(".selector").igCategoryChart("option", "dataSourceUrl", "http://www.example.com");

  • excludedProperties

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

    カテゴリ チャートから除外されるプロパティ パスのセットを取得または設定します。

    コード サンプル

     
// Given the following data bound to the chart...
var data1 = [
	{ "ID": 1, "Cost": 12.5, "Discount": 0.5, "ProductName": "Shirts" },
	{ "ID": 2, "Cost": 18.56, "Discount": 0.25, "ProductName": "Hats" },
	{ "ID": 3, "Cost": 22.18, "Discount": 0.1, "ProductName": "Shoes" }];
	
// Initialize
$(".selector").igCategoryChart({
	excludedProperties: [ "ID", "Discount" ]
});
        
// Get
var excludedProps = $(".selector").igCategoryChart("option", "excludedProperties");
        
// Set
$(".selector").igCategoryChart("option", "excludedProperties", [ "ID", "Discount" ]);

  • height
    継承

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

    チャートの高さ。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
    height: 250
});

// Get
var height = $(".selector").igCategoryChart("option", "height");
 
// Set
$(".selector").igCategoryChart("option", "height", 250);

  • includedProperties

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

    カテゴリ チャートに含まれる (その他のパスは除外) プロパティ パスのセットを取得または設定します。null の場合、すべてのプロパティが含まれます。

    コード サンプル

     
// Given the following data bound to the chart...
var data1 = [
	{ "ID": 1, "Cost": 12.5, "Discount": 0.5, "ProductName": "Shirts" },
	{ "ID": 2, "Cost": 18.56, "Discount": 0.25, "ProductName": "Hats" },
	{ "ID": 3, "Cost": 22.18, "Discount": 0.1, "ProductName": "Shoes" }];
	
// Initialize
$(".selector").igCategoryChart({
	includedProperties: [ "ProductName", "Cost" ]
});
        
// Get
var includedProps = $(".selector").igCategoryChart("option", "includedProperties");
        
// Set
$(".selector").igCategoryChart("option", "includedProperties", [ "ProductName", "Cost" ]);

  • isHorizontalZoomEnabled

    タイプ:
    bool
    デフォルト:
    false

    チャートがユーザー操作により水平方向にズーム可能かどうかを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
    isHorizontalZoomEnabled: true
});

// Get
var zoomEnabled = $(".selector").igCategoryChart("option", "isHorizontalZoomEnabled");
 
// Set
$(".selector").igCategoryChart("option", "isHorizontalZoomEnabled", true);

  • isTransitionInEnabled

    タイプ:
    bool
    デフォルト:
    false

    チャートがビューに読み込まれているときにシリーズ プロットのアニメーションが有効されるかどうかを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
    isTransitionInEnabled: true
});

// Get
var transitionEnabled = $(".selector").igCategoryChart("option", "isTransitionInEnabled");
 
// Set
$(".selector").igCategoryChart("option", "isTransitionInEnabled", true);

  • isVerticalZoomEnabled

    タイプ:
    bool
    デフォルト:
    false

    チャートがユーザー操作により垂直方向にズーム可能かどうかを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
    isVerticalZoomEnabled: true
});

// Get
var zoomEnabled = $(".selector").igCategoryChart("option", "isVerticalZoomEnabled");
 
// Set
$(".selector").igCategoryChart("option", "isVerticalZoomEnabled", true);

  • itemsSource

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

    チャートを生成するために使用されるデータ項目のコレクションを取得または設定します。
    このプロパティの値が数値プロパティを 1 つ以上含むオブジェクトのリストに設定できます。また、リストのオブジェクトが IEnumerable インターフェイスを実装する場合、カテゴリ チャートは、データソースを読み込むときにサブコレクションも使用します。データ項目クラスに DataSeriesMemberIntentAttribute 属性を追加すると、データ バインディングを構成できます。

    コード サンプル

     
// Given the following data...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	itemsSource: data1
});
        
// Get
var itemsSource = $(".selector").igCategoryChart("option", "itemsSource");
        
// Set
$(".selector").igCategoryChart("option", "itemsSource", data1);

  • leftMargin

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

    チャート コンテンツの左マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	leftMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "leftMargin");
        
// Set
$(".selector").igCategoryChart("option", "leftMargin", 20);

  • legend

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

    このチャートに接続する凡例を設定します。
    legend プロパティが設定される場合、チャートは凡例を使用してシリーズについての情報を表示します。凡例は複数のチャート コントロールに共有できます。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
    legend: { element: 'legend', type: 'legend' }
});
 
// Get
var legend = $(".selector").igCategoryChart("option", "legend");
 
// Set
$(".selector").igCategoryChart("option", "legend", { element: 'legend', type: 'legend' });

  • markerBrushes

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

    データ ポイント マーカーの塗りつぶしの色を設定するために使用されるブラシのパレットを取得または設定します。
    提供された値は、css 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	markerBrushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var brushes = $(".selector").igCategoryChart("option", "markerBrushes");
 
// Set
$(".selector").igCategoryChart("option", "markerBrushes", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • markerCollisionAvoidance

    タイプ:
    enumeration
    デフォルト:
    omit

    現在のビューで配置が近すぎるため接触している各シリーズのマーカーの動作を取得または設定します。

    メンバー

    • none
    • タイプ:string
    • 接触回避機能が無効です。
    • omit
    • タイプ:string
    • 他の項目と接触する項目はビューから非表示になります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	markerCollisionAvoidance: "omit"
});
 
// Get
var collisionAvoidance = $(".selector").igCategoryChart("option", "markerCollisionAvoidance");
 
// Set
$(".selector").igCategoryChart("option", "markerCollisionAvoidance", "omit");

  • markerOutlines

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

    データ ポイント マーカーのアウトラインの色を設定するために使用されるブラシのパレットを取得または設定します。
    提供された値は、css 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	markerOutlines: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var outlines = $(".selector").igCategoryChart("option", "markerOutlines");
 
// Set
$(".selector").igCategoryChart("option", "markerOutlines", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • markerTypes

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

    このチャートでシリーズのデータ ポイントを表すマーカー図形のコレクションを取得または設定します。
    MarkerTypes が null 値または空の場合、シリーズ型に基づいて各シリーズのマーカー型が none または automatic に設定されます。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	markerTypes: [ "triangle", "pentagon", "diamond" ]
});
 
// Get
var markerTypes = $(".selector").igCategoryChart("option", "markerTypes");
 
// Set
$(".selector").igCategoryChart("option", "markerTypes", [ "triangle", "pentagon", "diamond" ]);

  • maxRecCount
    継承

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

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

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	maxRecCount: 1000
});
 
// Get
var maxRecCount = $(".selector").igCategoryChart("option", "maxRecCount");
 
// Set
$(".selector").igCategoryChart("option", "maxRecCount", 1000);

  • negativeBrushes

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

    ウォーターフォール チャート型の負の項目に色を設定するためのパレットを取得または設定します。
    提供された値は、css 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	negativeBrushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var brushes = $(".selector").igCategoryChart("option", "negativeBrushes");
 
// Set
$(".selector").igCategoryChart("option", "negativeBrushes", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • negativeOutlines

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

    ウォーターフォールなどのコンテキスト色を持つチャート型の使用で負の要素の描画に使用するブラシ。
    提供された値は、css 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。

  • outlines

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

    チャート シリーズのアウトラインに使用するブラシのパレットを取得または設定します。提供された値は、CSS 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。
    提供された値は、css 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	outlines: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var outlines = $(".selector").igCategoryChart("option", "outlines");
 
// Set
$(".selector").igCategoryChart("option", "outlines", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • resolution

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

    このチャートのシリーズの描画解像度を取得または設定します。
    n = 解像度で、各 n 水平ピクセルのすべての項目を単一のデータポイントに結合します。解像度 = 0 の場合、すべてのデータポイントがグラフィッカル オブジェクトとして描画されます。チャートの解像度が高くなるとパフォーマンスが向上します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	resolution: 2
});
 
// Get
var resolution = $(".selector").igCategoryChart("option", "resolution");
 
// Set
$(".selector").igCategoryChart("option", "resolution", 2);

  • responseDataKey
    継承

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

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

    コード サンプル

     
// Initialize
$(".selector").igDataChart({
    responseDataKey: "Records"
});
 
// Get
var responseDataKey = $(".selector").igDataChart("option", "responseDataKey");

// Set
$(".selector").igDataChart("option", "responseDataKey", "Records");

  • responseTotalRecCountKey
    継承

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

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

    コード サンプル

     
// Initialize
$(".selector").igDataChart({
    responseTotalRecCountKey: "RecordCount"
});
 
// Get
var responseTotalRecCountKey = $(".selector").igDataChart("option", "responseTotalRecCountKey");

// Set
$(".selector").igDataChart("option", "responseTotalRecCountKey", "RecordCount");

  • rightMargin

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

    チャート コンテンツの右マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	rightMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "rightMargin");
        
// Set
$(".selector").igCategoryChart("option", "rightMargin", 20);

  • subtitle

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

    チャート タイトルの下でプロット エリアの上に表示するテキストを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitle: "This is a subtitle"
});
        
// Get
var subtitle = $(".selector").igCategoryChart("option", "subtitle");
        
// Set
$(".selector").igCategoryChart("option", "subtitle", "This is a subtitle");

  • subtitleAlignment

    タイプ:
    enumeration
    デフォルト:
    center

    チャートの左右端に相対するサブタイトルの配置を決定する水平配置を取得または設定します。

    メンバー

    • left
    • タイプ:string
    • 項目を左揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • right
    • タイプ:string
    • 項目を右揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅に拡大します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitleAlignment: "center"
});
        
// Get
var alignment = $(".selector").igCategoryChart("option", "subtitleAlignment");
        
// Set
$(".selector").igCategoryChart("option", "subtitleAlignment", "center");

  • subtitleBottomMargin

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

    チャート サブタイトルの下マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitleBottomMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleBottomMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleBottomMargin", 10);

  • subtitleLeftMargin

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

    チャート サブタイトルの左マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitleLeftMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleLeftMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleLeftMargin", 10);

  • subtitleRightMargin

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

    チャート サブタイトルの右マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitleRightMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleRightMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleRightMargin", 10);

  • subtitleTextColor

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

    チャート サブタイトルの色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitleTextColor: "blue"
});
        
// Get
var color = $(".selector").igCategoryChart("option", "subtitleTextColor");
        
// Set
$(".selector").igCategoryChart("option", "subtitleTextColor", "blue");

  • subtitleTextStyle

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

    チャート サブタイトルの CSS フォント プロパティを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitleTextStyle: "16pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "subtitleTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "subtitleTextStyle", "16pt Verdona");

  • subtitleTopMargin

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

    チャート サブタイトルの上マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	subtitleTopMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleTopMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleTopMargin", 10);

  • thickness

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

    チャート シリーズの太さを取得または設定します。ChartType に基づいて、これは使用されるメイン ブラシ、またはアウトラインのみです。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	thickness: 5
});
        
// Get
var thickness = $(".selector").igCategoryChart("option", "thickness");
        
// Set
$(".selector").igCategoryChart("option", "thickness", 5);

  • title

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

    プロット エリアの上に表示するテキストを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	title: "This is a title"
});
        
// Get
var title = $(".selector").igCategoryChart("option", "title");
        
// Set
$(".selector").igCategoryChart("option", "title", "This is a title");

  • titleAlignment

    タイプ:
    enumeration
    デフォルト:
    center

    チャートの左右端に相対するタイトルの配置を決定する水平配置を取得または設定します。

    メンバー

    • left
    • タイプ:string
    • 項目を左揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • right
    • タイプ:string
    • 項目を右揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅に拡大します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	titleAlignment: "center"
});
        
// Get
var alignment = $(".selector").igCategoryChart("option", "titleAlignment");
        
// Set
$(".selector").igCategoryChart("option", "titleAlignment", "center");

  • titleBottomMargin

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

    チャート タイトルの下マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	titleBottomMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleBottomMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleBottomMargin", 10);

  • titleLeftMargin

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

    チャート タイトルの左マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	titleLeftMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleLeftMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleLeftMargin", 10);

  • titleRightMargin

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

    チャート タイトルの右マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	titleRightMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleRightMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleRightMargin", 10);

  • titleTextColor

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

    チャート タイトルの色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	titleTextColor: "red"
});
        
// Get
var color = $(".selector").igCategoryChart("option", "titleTextColor");
        
// Set
$(".selector").igCategoryChart("option", "titleTextColor", "red");

  • titleTextStyle

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

    チャート タイトルの CSS フォント プロパティを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	titleTextStyle: "24pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "titleTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "titleTextStyle", "24pt Verdona");

  • titleTopMargin

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

    チャート タイトルの上マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	titleTopMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleTopMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleTopMargin", 10);

  • tooltipTemplate

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

    ツールチップに使用するテンプレート要素の ID、またはツールチップ テンプレートを表すマークアップを取得または設定します。

    コード サンプル

     
// Given the following data...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];

// And the following template...
<script id="chartTooltip" type="text/x-jquery-tmpl">
	<div>
		This is custom tooltip content.<br />
		<span>${item.ID}</span><br />
		<span>${item.Cost}</span><br />
	</div>
</script>
	
// Initialize
$(".selector").igCategoryChart({
	tooltipTemplate: chartTooltip
});
        
// Get
var template = $(".selector").igCategoryChart("option", "tooltipTemplate");
        
// Set
$(".selector").igCategoryChart("option", "tooltipTemplate", chartTooltip);

  • tooltipTemplates

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

  • topMargin

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

    チャート コンテンツの上マージンを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	topMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "topMargin");
        
// Set
$(".selector").igCategoryChart("option", "topMargin", 20);

  • transitionDuration

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

    データが変更されているときにシリーズ プロットのアニメーションに使用される期間を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	transitionDuration: 500
});
        
// Get
var duration = $(".selector").igCategoryChart("option", "transitionDuration");
        
// Set
$(".selector").igCategoryChart("option", "transitionDuration", 500);

  • transitionEasingFunction

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

    データが変更されているときにシリーズ プロットのアニメーションに使用されるイージング関数を取得または設定します。
    既知の値 linear または cubic のいずれかに設定することができます。または、単一の数値パラメーターを取り、数値を返すイージング関数に設定することもできます。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	transitionEasingFunction: "cubic"
});
        
// Get
var easingFunc = $(".selector").igCategoryChart("option", "transitionEasingFunction");
        
// Set
$(".selector").igCategoryChart("option", "transitionEasingFunction", "cubic");

  • transitionInDuration

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

    チャートがビューに読み込まれているときにシリーズ プロットのアニメーションに使用される期間を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	transitionInDuration: 500
});
        
// Get
var duration = $(".selector").igCategoryChart("option", "transitionInDuration");
        
// Set
$(".selector").igCategoryChart("option", "transitionInDuration", 500);

  • transitionInEasingFunction

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

    チャートがビューに読み込まれているときにシリーズ プロットのアニメーションに使用されるイージング関数を取得または設定します。
    既知の値 linear または cubic のいずれかに設定することができます。または、単一の数値パラメーターを取得し、数値を返すイージング関数に設定することもできます。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	transitionInEasingFunction: "cubic"
});
        
// Get
var easingFunc = $(".selector").igCategoryChart("option", "transitionInEasingFunction");
        
// Set
$(".selector").igCategoryChart("option", "transitionInEasingFunction", "cubic");

  • transitionInMode

    タイプ:
    enumeration
    デフォルト:
    auto

    チャートがビューに読み込まれているときにシリーズ プロットのアニメーション方法を決定するメソッドを取得または設定します。

    メンバー

    • auto
    • タイプ:string
    • シリーズ タイプと方向に基づいて自動的に選択されたシリーズ トランジション。
    • fromZero
    • タイプ:string
    • シリーズが数値軸の参照値からトランジションします。
    • sweepFromLeft
    • タイプ:string
    • シリーズは左側からスイープします。
    • sweepFromRight
    • タイプ:string
    • シリーズは右側からスイープします。
    • sweepFromTop
    • タイプ:string
    • シリーズは上側からスイープします。
    • sweepFromBottom
    • タイプ:string
    • シリーズは下側からスイープします。
    • sweepFromCenter
    • タイプ:string
    • シリーズは中央からスイープします。
    • accordionFromLeft
    • タイプ:string
    • シリーズは左側からアコーディオン表示します。
    • accordionFromRight
    • タイプ:string
    • シリーズは右側からアコーディオン表示します。
    • accordionFromTop
    • タイプ:string
    • シリーズは上側からアコーディオンします。
    • accordionFromBottom
    • タイプ:string
    • シリーズは下側からアコーディオン表示します。
    • expand
    • タイプ:string
    • シリーズは値の中点から展開します。
    • sweepFromCategoryAxisMinimum
    • タイプ:string
    • シリーズはカテゴリ軸の最小値からスイープします。
    • sweepFromCategoryAxisMaximum
    • タイプ:string
    • シリーズはカテゴリ軸の最大値からスイープ インします。
    • sweepFromValueAxisMinimum
    • タイプ:string
    • シリーズは値軸の最小値からスイープします。
    • sweepFromValueAxisMaximum
    • タイプ:string
    • シリーズが数値軸の最大値からスイープします。
    • accordionFromCategoryAxisMinimum
    • タイプ:string
    • シリーズはカテゴリ軸の最小値からアコーディオン表示します。
    • accordionFromCategoryAxisMaximum
    • タイプ:string
    • シリーズはカテゴリ軸の最大値からアコーディオン表示します。
    • accordionFromValueAxisMinimum
    • タイプ:string
    • シリーズは値軸の最小値からアコーディオン表示します。
    • accordionFromValueAxisMaximum
    • タイプ:string
    • シリーズは値軸の最大値からアコーディオンします。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	transitionInMode: "sweepFromRight"
});
        
// Get
var mode = $(".selector").igCategoryChart("option", "transitionInMode");
        
// Set
$(".selector").igCategoryChart("option", "transitionInMode", "sweepFromRight");

  • transitionInSpeedType

    タイプ:
    enumeration
    デフォルト:
    auto

    チャートがビューに読み込まれているときにシリーズ プロットのアニメーションに使用される入り速度を取得または設定します。

    メンバー

    • auto
    • タイプ:string
    • スピード タイプは自動的に選択されます。
    • normal
    • タイプ:string
    • すべてのスピードは標準です。データ ポイントが同時に表示されます。
    • valueScaled
    • タイプ:string
    • データ ポイントの値が開始ポイントから離れるほど、ポイントへの到着が遅くなります。
    • indexScaled
    • タイプ:string
    • データ ポイントのインデックスが軸基点から離れるほど、ポイントへの到着は遅くなります。
    • random
    • タイプ:string
    • データ ポイントは時間的にランダムに表示されます。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	transitionInSpeedType: "indexScaled"
});
        
// Get
var speedType = $(".selector").igCategoryChart("option", "transitionInSpeedType");
        
// Set
$(".selector").igCategoryChart("option", "transitionInSpeedType", "indexScaled");

  • trendLineBrushes

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

    このチャートでトレンドラインの色に使用されるブラシのパレットを取得または設定します。提供された値は、CSS 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。
    提供された値は、css 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	trendLineBrushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
        
// Get
var brushes = $(".selector").igCategoryChart("option", "trendLineBrushes");
        
// Set
$(".selector").igCategoryChart("option", "trendLineBrushes", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • trendLineThickness

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

    このチャートのトレンドラインの太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	trendLineThickness: 5
});
        
// Get
var thickness = $(".selector").igCategoryChart("option", "trendLineThickness");
        
// Set
$(".selector").igCategoryChart("option", "trendLineThickness", 5);

  • trendLineType

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

    このチャートでトレンドラインを計算するために使用される数式を取得または設定します。

    メンバー

    • none
    • タイプ:string
    • トレンド ラインは表示されません。
    • linearFit
    • タイプ:string
    • リニア フィット。
    • quadraticFit
    • タイプ:string
    • 二次多項式フィット。
    • cubicFit
    • タイプ:string
    • 三次多項式フィット
    • quarticFit
    • タイプ:string
    • 四次多項式フィット。
    • quinticFit
    • タイプ:string
    • 五次多項式フィット。
    • logarithmicFit
    • タイプ:string
    • 対数フィット。
    • exponentialFit
    • タイプ:string
    • 指数フィット。
    • powerLawFit
    • タイプ:string
    • ベキ法則フィット。
    • simpleAverage
    • タイプ:string
    • シンプルな移動平均。
    • exponentialAverage
    • タイプ:string
    • 指数移動平均。
    • modifiedAverage
    • タイプ:string
    • 変更済み移動平均。
    • cumulativeAverage
    • タイプ:string
    • 累積移動平均。
    • weightedAverage
    • タイプ:string
    • ウェイト移動平均。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	trendLineType: "simpleAverage"
});
        
// Get
var trendLineType = $(".selector").igCategoryChart("option", "trendLineType");
        
// Set
$(".selector").igCategoryChart("option", "trendLineType", "simpleAverage");

  • unknownValuePlotting

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

    不明な値がチャートにプロットされる方法を決定する動作を取得または設定します。 Null および Double.NaN は不明な値の 2 つの例です。

    メンバー

    • linearInterpolate
    • タイプ:string
    • 線形補間を使用すると、不明な値を囲む定義した値の中にプロットします。
    • dontPlot
    • タイプ:string
    • チャートに不明な値をプロットしません。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	unknownValuePlotting: "linearInterpolate"
});
        
// Get
var unknownValuePlotting = $(".selector").igCategoryChart("option", "unknownValuePlotting");
        
// Set
$(".selector").igCategoryChart("option", "unknownValuePlotting", "linearInterpolate");

  • widget

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

  • width
    継承

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

    チャートの幅。

    コード サンプル

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

  • windowRect

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

    チャートの現在スクロールおよびズーム状態を表す矩形を取得または設定します。
    WindowRect は、 0 ~ 1 の間の座標およびサイズの Rectangle として表現されます。
    提供されたオブジェクトは、left、top、width および height と呼ばれる数値プロパティを持っている必要があります。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	windowRect: { left: 0, top: 0, width: 0.5, height: 0.5 }
});
   
// Get
var windowRect = $(".selector").igCategoryChart("option", "windowRect");
   
// Set
$(".selector").igCategoryChart("option", "windowRect", { left: 0, top: 0, width: 0.5, height: 0.5 });

  • xAxisExtent

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

    X 軸およびチャートの下端の間の距離を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisExtent: 10
});
   
// Get
var extent = $(".selector").igCategoryChart("option", "xAxisExtent");
   
// Set
$(".selector").igCategoryChart("option", "xAxisExtent", 10);

  • xAxisFormatLabel

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

    コンテキスト オブジェクトを受けて、X 軸の書式設定されたラベルを返す関数を取得または設定します。

    コード サンプル

     
// Given the following data where ID is the X axis...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	xAxisFormatLabel: function (item) {
		return "ID " + item; // results: "ID 1", "ID 2" & "ID 3" labels
	}
});

  • xAxisGap

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

    X 軸の隣接カテゴリ間のスペースの量を取得または設定します。
    間隔は範囲 [0, 1] にサイレントで固定されます。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisGap: 0.5
});
   
// Get
var gap = $(".selector").igCategoryChart("option", "xAxisGap");
   
// Set
$(".selector").igCategoryChart("option", "xAxisGap", 0.5);

  • xAxisInterval

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

    X 軸に表示されるラベルの間隔を取得または設定します。
    設定値が非表示になるラベルを決定するかどうかを取得または設定します。たとえば、間隔が 2 の場合は 1 つおきのラベルを表示します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisInterval: 2
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "xAxisInterval");
   
// Set
$(".selector").igCategoryChart("option", "xAxisInterval", 2);

  • xAxisInverted

    タイプ:
    bool
    デフォルト:
    false

    最初のデータ項目を左側の代わりに右側に配置して X 軸の方向が反転されるかどうかを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisInverted: true
});
   
// Get
var isInverted = $(".selector").igCategoryChart("option", "xAxisInverted");
   
// Set
$(".selector").igCategoryChart("option", "xAxisInverted", true);

  • xAxisLabel

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

    X 軸にラベルの書式設定を取得または設定します。

    コード サンプル

     
// Given the following data bound to the chart...
var data1 = [
	{ "ID": 1, "Cost": 12.5, "Discount": 0.5, "ProductName": "Shirts" },
	{ "ID": 2, "Cost": 18.56, "Discount": 0.25, "ProductName": "Hats" },
	{ "ID": 3, "Cost": 22.18, "Discount": 0.1, "ProductName": "Shoes" }];
	
// Initialize
$(".selector").igCategoryChart({
	xAxisLabel: "ProductName"
});
   
// Get
var label = $(".selector").igCategoryChart("option", "xAxisLabel");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabel", "ProductName");

  • xAxisLabelAngle

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

    X 軸にラベルの回転の角度を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "xAxisLabelAngle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelAngle", 30);

  • xAxisLabelBottomMargin

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

    X 軸のラベルの下余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelBottomMargin", 10);

  • xAxisLabelHorizontalAlignment

    タイプ:
    enumeration
    デフォルト:
    center

    X 軸ラベルの水平方向の配置を取得または設定します。

    メンバー

    • left
    • タイプ:string
    • 項目を左揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • right
    • タイプ:string
    • 項目を右揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅に拡大します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelHorizontalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "xAxisLabelHorizontalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelHorizontalAlignment", "center");

  • xAxisLabelLeftMargin

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

    X 軸のラベルの左余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelLeftMargin", 10);

  • xAxisLabelRightMargin

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

    X 軸のラベルの右余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelRightMargin", 10);

  • xAxisLabelTextColor

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

    X 軸のラベルの色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelTextColor: "blue"
});
   
// Get
var textColor = $(".selector").igCategoryChart("option", "xAxisLabelTextColor");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelTextColor", "blue");

  • xAxisLabelTextStyle

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

    X 軸のラベルに CSS フォント プロパティを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelTextStyle: "16pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "xAxisLabelTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "xAxisLabelTextStyle", "16pt Verdona");

  • xAxisLabelTopMargin

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

    X 軸のラベルの上余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelTopMargin", 10);

  • xAxisLabelVerticalAlignment

    タイプ:
    enumeration
    デフォルト:
    top

    X 軸ラベルの垂直方向の配置を取得または設定します。

    メンバー

    • top
    • タイプ:string
    • 項目を上揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • bottom
    • タイプ:string
    • 項目を下揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅にストレッチします。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelVerticalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "xAxisLabelVerticalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelVerticalAlignment", "center");

  • xAxisLabelVisibility

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

    X 軸ラベルの可視性を取得または設定します。

    メンバー

    • visible
    • タイプ:string
    • 要素を表示します。
    • collapsed
    • タイプ:string
    • 要素を表示しません。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelVisibility: "visible"
});
   
// Get
var visibility = $(".selector").igCategoryChart("option", "xAxisLabelVisibility");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelVisibility", "visible");

  • xAxisMajorStroke

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

    X 軸の主グリッド線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisMajorStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisMajorStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMajorStroke", "blue");

  • xAxisMajorStrokeThickness

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

    X 軸の主グリッド線に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisMajorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisMajorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMajorStrokeThickness", 5);

  • xAxisMinorInterval

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

    X 軸に表示される副線の間隔を取得または設定します。
    設定値によって副線の表示方法が決定されるかどうかを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisMinorInterval: 1
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "xAxisMinorInterval");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMinorInterval", 1);

  • xAxisMinorStroke

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

    X 軸の副グリッド線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisMinorStroke: "grey"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisMinorStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMinorStroke", "grey");

  • xAxisMinorStrokeThickness

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

    X 軸の副グリッド線に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisMinorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisMinorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMinorStrokeThickness", 5);

  • xAxisOverlap

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

    X 軸の隣接カテゴリ間で重複する量を取得または設定します。
    重複は範囲 [-1, 1] にサイレントで固定されるかどうかを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisOverlap: 0.5
});
   
// Get
var overlap = $(".selector").igCategoryChart("option", "xAxisOverlap");
   
// Set
$(".selector").igCategoryChart("option", "xAxisOverlap", 0.5);

  • xAxisStrip

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

    X 軸のストライプ線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisStrip: "grey"
});
   
// Get
var strip = $(".selector").igCategoryChart("option", "xAxisStrip");
   
// Set
$(".selector").igCategoryChart("option", "xAxisStrip", "grey");

  • xAxisStroke

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

    X 軸線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisStroke", "blue");

  • xAxisStrokeThickness

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

    X 軸線に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisStrokeThickness", 5);

  • xAxisTickLength

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

    X 軸に目盛の長さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTickLength: 5
});
   
// Get
var tickLength = $(".selector").igCategoryChart("option", "xAxisTickLength");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTickLength", 5);

  • xAxisTickStroke

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

    X 軸の目盛に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTickStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisTickStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTickStroke", "blue");

  • xAxisTickStrokeThickness

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

    X 軸の目盛に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTickStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisTickStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTickStrokeThickness", 5);

  • xAxisTitle

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

    X 軸の下に表示するテキスト。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitle: "This is an axis title"
});
   
// Get
var title = $(".selector").igCategoryChart("option", "xAxisTitle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitle", "This is an axis title");

  • xAxisTitleAlignment

    タイプ:
    enumeration
    デフォルト:
    center

    X 軸タイトルの水平方向の配置を取得または設定します。

    メンバー

    • left
    • タイプ:string
    • 項目を左揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • right
    • タイプ:string
    • 項目を右揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅にストレッチします。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "xAxisTitleAlignment");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleAlignment", "center");

  • xAxisTitleAngle

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

    X 軸タイトルの回転の角度を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "xAxisTitleAngle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleAngle", 30);

  • xAxisTitleBottomMargin

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

    X 軸のタイトルの下余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleBottomMargin", 10);

  • xAxisTitleLeftMargin

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

    X 軸のタイトルの左余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleLeftMargin", 10);

  • xAxisTitleMargin

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

    X 軸のタイトルの周りの余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleMargin", 10);

  • xAxisTitleRightMargin

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

    X 軸のタイトルの右余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleRightMargin", 10);

  • xAxisTitleTextColor

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

    X 軸のタイトルの色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleTextColor: "blue"
});
   
// Get
var color = $(".selector").igCategoryChart("option", "xAxisTitleTextColor");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleTextColor", "blue");

  • xAxisTitleTextStyle

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

    X 軸のタイトルに CSS フォント プロパティを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleTextStyle: "26pt Times New Roman|Georgia|Serif"
});
   
// Get
var textStyle = $(".selector").igCategoryChart("option", "xAxisTitleTextStyle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleTextStyle", "26pt Times New Roman|Georgia|Serif");

  • xAxisTitleTopMargin

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

    X 軸のタイトルの上余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleTopMargin", 10);

  • yAxisExtent

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

    Y 軸およびチャートの左端の間の距離を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisExtent: 10
});
   
// Get
var extent = $(".selector").igCategoryChart("option", "yAxisExtent");
   
// Set
$(".selector").igCategoryChart("option", "yAxisExtent", 10);

  • yAxisFormatLabel

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

    コンテキスト オブジェクトを受けて、Y 軸の書式設定されたラベルを返す関数を取得または設定します。

    コード サンプル

     
// Given the following data where Cost is the Y axis...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	yAxisFormatLabel: function (item) {
		return item.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
	}
});

  • yAxisInterval

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

    Y 軸に各ラベルおよびグリッド線の間の距離を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisInterval: 2
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "yAxisInterval");
   
// Set
$(".selector").igCategoryChart("option", "yAxisInterval", 2);

  • yAxisInverted

    タイプ:
    bool
    デフォルト:
    false

    最小の数値を軸の上側に配置して Y 軸の方向が反転されるかどうかを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisInverted: true
});
   
// Get
var isInverted = $(".selector").igCategoryChart("option", "yAxisInverted");
   
// Set
$(".selector").igCategoryChart("option", "yAxisInverted", true);

  • yAxisIsLogarithmic

    タイプ:
    bool
    デフォルト:
    false

    Y 軸がリニア スケールの代わりに対数目盛を使用するかどうかを取得または設定します。
    log(-1) が仮想で、log(0) が undefined のため、Y 軸の最小値が 0 より大きい場合のみにこのプロパティを有効にします。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisIsLogarithmic: true
});
   
// Get
var isInverted = $(".selector").igCategoryChart("option", "yAxisIsLogarithmic");
   
// Set
$(".selector").igCategoryChart("option", "yAxisIsLogarithmic", true);

  • yAxisLabel

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

    Y 軸にラベルの書式設定を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabel: "{0:n}"
});
   
// Get
var label = $(".selector").igCategoryChart("option", "yAxisLabel");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabel", "{0:n}");

  • yAxisLabelAngle

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

    Y 軸にラベルの回転の角度を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "yAxisLabelAngle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelAngle", 30);

  • yAxisLabelBottomMargin

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

    Y 軸のラベルの下余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelBottomMargin", 10);

  • yAxisLabelHorizontalAlignment

    タイプ:
    enumeration
    デフォルト:
    right

    Y 軸ラベルの水平方向の配置を取得または設定します。

    メンバー

    • left
    • タイプ:string
    • 項目を左揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • right
    • タイプ:string
    • 項目を右揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅にストレッチします。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelHorizontalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "yAxisLabelHorizontalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelHorizontalAlignment", "center");

  • yAxisLabelLeftMargin

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

    Y 軸のラベルの左余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelLeftMargin", 10);

  • yAxisLabelRightMargin

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

    Y 軸のラベルの右余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelRightMargin", 10);

  • yAxisLabelTextColor

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

    Y 軸のラベルの色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelTextColor: "blue"
});
   
// Get
var textColor = $(".selector").igCategoryChart("option", "yAxisLabelTextColor");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelTextColor", "blue");

  • yAxisLabelTextStyle

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

    Y 軸のラベルに CSS フォント プロパティを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelTextStyle: "16pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "yAxisLabelTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "yAxisLabelTextStyle", "16pt Verdona");

  • yAxisLabelTopMargin

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

    Y 軸のラベルの上余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelTopMargin", 10);

  • yAxisLabelVerticalAlignment

    タイプ:
    enumeration
    デフォルト:
    center

    Y 軸ラベルの垂直方向の配置を取得または設定します。

    メンバー

    • top
    • タイプ:string
    • 項目を上揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • bottom
    • タイプ:string
    • 項目を下揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅にストレッチします。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelVerticalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "yAxisLabelVerticalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelVerticalAlignment", "center");

  • yAxisLabelVisibility

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

    Y 軸ラベルの可視性を取得または設定します。

    メンバー

    • visible
    • タイプ:string
    • 要素を表示します。
    • collapsed
    • タイプ:string
    • 要素を表示しません。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelVisibility: "visible"
});
   
// Get
var visibility = $(".selector").igCategoryChart("option", "yAxisLabelVisibility");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelVisibility", "visible");

  • yAxisLogarithmBase

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

    Y 軸にデータ項目の位置をマップするときに log 関数で使用する基本値を取得または設定します。
    このプロパティは YAxisIsLogarithmic が True の場合のみ結果的です。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisLogarithmBase: 10
});
   
// Get
var logBase = $(".selector").igCategoryChart("option", "yAxisLogarithmBase");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLogarithmBase", 10);

  • yAxisMajorStroke

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

    Y 軸の主グリッド線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisMajorStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisMajorStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMajorStroke", "blue");

  • yAxisMajorStrokeThickness

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

    Y 軸の主グリッド線に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisMajorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisMajorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMajorStrokeThickness", 5);

  • yAxisMaximumValue

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

    Y 軸の最大値と関連するデータ値を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisMaximumValue: 100
});
   
// Get
var maxValue = $(".selector").igCategoryChart("option", "yAxisMaximumValue");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMaximumValue", 100);

  • yAxisMinimumValue

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

    Y 軸の最小値と関連するデータ値を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisMinimumValue: 0
});
   
// Get
var minValue = $(".selector").igCategoryChart("option", "yAxisMinimumValue");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinimumValue", 0);

  • yAxisMinorInterval

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

    Y 軸に表示される副線の間隔を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisMinorInterval: 1
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "yAxisMinorInterval");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinorInterval", 1);

  • yAxisMinorStroke

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

    Y 軸の副グリッド線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisMinorStroke: "grey"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisMinorStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinorStroke", "grey");

  • yAxisMinorStrokeThickness

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

    Y 軸の副グリッド線に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisMinorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisMinorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinorStrokeThickness", 5);

  • yAxisStrip

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

    Y 軸のストライプ線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisStrip: "grey"
});
   
// Get
var strip = $(".selector").igCategoryChart("option", "yAxisStrip");
   
// Set
$(".selector").igCategoryChart("option", "yAxisStrip", "grey");

  • yAxisStroke

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

    Y 軸線に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisStroke", "blue");

  • yAxisStrokeThickness

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

    Y 軸線に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisStrokeThickness", 5);

  • yAxisTickLength

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

    Y 軸に目盛の長さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTickLength: 5
});
   
// Get
var tickLength = $(".selector").igCategoryChart("option", "yAxisTickLength");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTickLength", 5);

  • yAxisTickStroke

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

    Y 軸の目盛に適用する色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTickStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisTickStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTickStroke", "blue");

  • yAxisTickStrokeThickness

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

    Y 軸の目盛に適用する太さを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTickStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisTickStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTickStrokeThickness", 5);

  • yAxisTitle

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

    Y 軸の左に表示するテキスト。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitle: "This is an axis title"
});
   
// Get
var title = $(".selector").igCategoryChart("option", "yAxisTitle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitle", "This is an axis title");

  • yAxisTitleAlignment

    タイプ:
    enumeration
    デフォルト:
    center

    Y 軸タイトルの垂直方向の配置を取得または設定します。

    メンバー

    • top
    • タイプ:string
    • 項目を上揃えにします。
    • center
    • タイプ:string
    • 項目を中央揃えにします。
    • bottom
    • タイプ:string
    • 項目を下揃えにします。
    • stretch
    • タイプ:string
    • 項目を全幅にストレッチします。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "yAxisTitleAlignment");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleAlignment", "center");

  • yAxisTitleAngle

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

    Y 軸タイトルの回転の角度を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "yAxisTitleAngle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleAngle", 30);

  • yAxisTitleBottomMargin

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

    Y 軸のタイトルの下余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleBottomMargin", 10);

  • yAxisTitleLeftMargin

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

    Y 軸のタイトルの左余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleLeftMargin", 10);

  • yAxisTitleMargin

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

    Y 軸のタイトルの周りの余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleMargin", 10);

  • yAxisTitleRightMargin

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

    Y 軸のタイトルの右余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleRightMargin", 10);

  • yAxisTitleTextColor

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

    Y 軸のタイトルの色を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleTextColor: "blue"
});
   
// Get
var color = $(".selector").igCategoryChart("option", "yAxisTitleTextColor");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleTextColor", "blue");

  • yAxisTitleTextStyle

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

    Y 軸のタイトルに CSS フォント プロパティを取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleTextStyle: "26pt Times New Roman|Georgia|Serif"
});
   
// Get
var textStyle = $(".selector").igCategoryChart("option", "yAxisTitleTextStyle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleTextStyle", "26pt Times New Roman|Georgia|Serif");

  • yAxisTitleTopMargin

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

    Y 軸のタイトルの上余白を取得または設定します。

    コード サンプル

     
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleTopMargin", 10);

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

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

詳細の表示

  • dataBinding
    継承

    キャンセル可能:
    true

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

    コード サンプル

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

  • dataBound
    継承

    キャンセル可能:
    false

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

    コード サンプル

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

  • hideTooltip
    継承

    キャンセル可能:
    true

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

    コード サンプル

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

  • propertyChanged

    キャンセル可能:
    false

    プロパティ値が変化した時に発生されるイベント。

    コード サンプル

     
// Delegate
$(document).delegate(".selector", "igcategorychartpropertychanged", function (evt, ui) {
     
    // Gets the name of the property that changed.
    ui.propertyName;
});
 
// Initialize
$(".selector").igCategoryChart({
    propertyChanged: function (evt, ui) {...}
});

  • seriesAdded

    キャンセル可能:
    false

    シリーズが初期化されるときに発生するイベント。

  • seriesRemoved

    キャンセル可能:
    false

    CategoryChart からシリーズが削除されたときに発生するイベント。

  • updateTooltip
    継承

    キャンセル可能:
    true

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

    コード サンプル

     
// Delegate
$(document).delegate(".selector", "igcategorychartupdatetooltip", function (evt, ui) {
    // Get reference to igCategoryChart.
    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").igCategoryChart({
    updateTooltip: function(evt, ui) {...}
});

  • addItem
    継承

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

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

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

    コード サンプル

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

  • chart
    継承

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

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

    コード サンプル

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

  • dataBind
    継承

    .igCategoryChart( "dataBind" );

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

    コード サンプル

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

  • destroy

    .igCategoryChart( "destroy" );

    コード サンプル

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

  • exportVisualData

    .igCategoryChart( "exportVisualData" );

    コード サンプル

     
var visualData = $(".selector").igCategoryChart("exportVisualData");

  • findIndexOfItem
    継承

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

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

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

    コード サンプル

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

  • flush
    継承

    .igCategoryChart( "flush" );

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

  • getData
    継承

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

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

    コード サンプル

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

  • getDataItem
    継承

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

    チャートに使用される実際のデータの項目を取得します。this.getData()[ index ] に似ています。

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

    コード サンプル

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

  • id

    .igCategoryChart( "id" );

    コード サンプル

     
var id = $(".selector").igCategoryChart("id");

  • insertItem
    継承

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

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

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

    コード サンプル

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

  • notifyClearItems
    継承

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

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

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

    コード サンプル

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

  • notifyInsertItem
    継承

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

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

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

    コード サンプル

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

  • notifyRemoveItem
    継承

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

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

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

    コード サンプル

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

  • notifySetItem
    継承

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

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

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

    コード サンプル

     
$(".selector").igCategoryChart("notifySetItem", dataSource, 1, {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75}, {"Item1": "Value2", "Item2": 500, "Item3": 156.22});

  • removeItem
    継承

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

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

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

    コード サンプル

     
$(".selector").igCategoryChart("removeItem", 0);

  • setItem
    継承

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

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

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

    コード サンプル

     
$(".selector").igCategoryChart("setItem", 0, item);

  • ui-category ui-corner-all ui-widget-content ui-categorychart-container

    メイン要素に適用されるクラスを取得します: ui-category ui-corner-all ui-widget-content。

  • ui-category-tooltip ui-widget-content ui-corner-all

    ツールチップ要素 (ui-category-tooltip 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.