ドーナツ・グラフ SDS

追加のデータ・セット用のドリルダウン・ツリーを追加するオプションを備えた、データ・セットのドーナツ・グラフを生成します。 サービスを使用してデータ・セットにデータを取り込む必要があります。

制約事項

ドーナツ・グラフ SDS には、サービスを使用してデータを取り込む必要があります。
注: 省略表示可能パネルでグラフを表示するときにサイズ変更の問題が発生した場合は、省略表示可能パネルの On expand イベントで以下のコードを使用して、グラフのサイズを使用可能なスペースに調整してください。 ${CHART_CONTROL_ID}.refresh();

構成プロパティー

「構成」で、ビューの外観および動作プロパティーを設定または変更します。

画面サイズ
プロパティー名の横に画面サイズ・アイコン 画面サイズ・アイコン がある構成プロパティーは、画面サイズごとに異なる値を持つことができます。 値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。
テーマ定義
テーマ定義は、ビューの色およびスタイルを指定し、その外観を決定します。 ビューのルック・アンド・フィールをテーマ・エディターでプレビューできます。 テーマを参照してください。
以下の表に、ドーナツ・グラフ SDS の外観構成プロパティーを示します。
表 1. ドーナツ・グラフ SDS の外観構成プロパティー
外観構成プロパティー 説明 データ・タイプ
背景色のスタイル 背景色の色のスタイル。 String
データ系列の色のスタイル データ系列の色のスタイル。 String
データ系列のカスタム色のスタイル データ系列の色のスタイルをカスタマイズします。
NameValuePairでは、 Name はデータ・ポイント・ラベル、 Value は名前、16 進コード、または RGB コードとして指定された色です。 例えば、 red#ff0000rgb(255, 0, 0)などです。
このプロパティーは データ系列の色のスタイルよりも優先されます。
NameValuePair (List)
パンくずリストの表示 このオプションが有効になっている場合、(メニュー選択に応じて) ユーザーがドリルダウンできるツリーの現在位置がタイトルに表示されます。 Boolean
凡例の配置 グラフの凡例の位置。 String
境界線半径 グラフの半径です。 String
埋め込み グラフの上下左右の埋め込み (ピクセル単位)。 String
高さ画面サイズ・アイコン グラフの高さ。 Integer
以下の表に、ドーナツ・グラフ SDS の動作構成プロパティーを示します。
表 2. ドーナツ・グラフ SDS の動作構成プロパティー
動作構成プロパティー 説明 データ・タイプ
グラフ・データ・モード グラフ・データをサービスから取り込むか、構成オプションから取り込むかを選択します。 ユーザーがドリルダウンできるツリーは、適切な Ajax アクセスを伴うサービス・フローを使用して取り込むことによってのみ使用できることに注意してください。 String
データ・サービス データ系列にデータを取り込むサービス。 Ajax service
データ系列 seriesName はデータ系列の名前で、dataPoints はデータ系列に含めるデータ・ポイントのリストです。 seriesName の場合は StringdataPointsのリストの場合は DataPoint[]
メニューを有効にする メニューの可視性を有効にします。 ユーザーがドリルダウンできるツリーがある場合、またはメニューを追加した場合は、メニューが必要です。 Boolean
ツールチップを表示します。 このオプションが有効になっている場合、マウスをグラフ内のデータ・ポイントの上に移動すると、ツールチップが表示されます。 ツールチップにはポイントの名前とその値の両方が示されます。 Boolean
グラフで使用できるドリルダウン・ツリーについては、「 ドリルダウン・ツリー」を参照してください。

イベント

「イベント」プロパティーでビューのイベント・ハンドラーの設定や変更を行います。 イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。 イベントを定義およびコーディングする方法については、 ユーザー定義イベントを参照してください。 ドーナツ・グラフ SDS には、以下のタイプのイベント・ハンドラーがあります。
  • On load: グラフのロード時にアクティブ化されます。以下に例を示します。
    me.defocusSeries("Brand1")
  • On refreshed: グラフの最新表示時にアクティブ化されます。以下に例を示します。
    me.focusSeries("Brand1")
  • On click: グラフがクリックされたときにアクティブ化されます。以下に例を示します。
    me.transform("donut", ["Brand1","Brand2"])
  • On menu action: メニュー・アクションが検出されたときにアクティブ化されます。以下に例を示します。
    console.log("Running menu action '" + action.name + "' on " + me.getSelectedDataPoint().label + " with value of " + me.getSelectedDataPoint().value)

キーボード・ナビゲーション

キーボードを使用してグラフをナビゲートするには、次のようにします。
  • 目的のグラフが強調表示されるまで Tab を押します。
  • Tab を押すと、グラフ内にフォーカスが置かれます。
  • グラフ内をナビゲートするには、右矢印キー、左矢印キー、上矢印キー、または下矢印キーを使用します。
    注: 説明に従ってチャートをナビゲートするには、JAWS スクリーン・リーダーを使用する必要があります。

方法

ドーナツ・グラフ SDS のメソッドについては、 ドーナツ・グラフ SDS JavaScript API を参照してください。

その他のリソース

Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」「構成」「位置決め」「可視性」、および 「HTML 属性」) について詳しくは、 「プロパティーの表示」を参照してください。