折れ線グラフ
追加のデータ・セット用のドリルダウン・ツリーを追加するオプションを備えた、データ・セットの線グラフを生成します。 データ・セットには、静的に、またはサービスを使用してデータを設定することができます。
制約事項
線グラフには、サービスを使用してデータを取り込む必要があります。
注: 省略表示可能パネルでグラフを表示するときにサイズ変更の問題が発生した場合は、省略表示可能パネルの On expand イベントで以下のコードを使用して、グラフのサイズを使用可能なスペースに調整してください。
${CHART_CONTROL_ID}.refresh();構成プロパティー
「構成」で、ビューの外観および動作プロパティーを設定または変更します。
- 画面サイズ
- プロパティー名の横に画面サイズ・アイコン
がある構成プロパティーは、画面サイズごとに異なる値を持つことができます。 値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。
- テーマ定義
- テーマ定義は、ビューの色およびスタイルを指定し、その外観を決定します。 ビューのルック・アンド・フィールをテーマ・エディターでプレビューできます。 テーマを参照してください。
以下の表に、線グラフ・ビューの外観構成プロパティーを示します。
| 外観構成プロパティー | 説明 | データ・タイプ |
|---|---|---|
| 平滑線 | データ・ポイントを接続する曲線が滑らかになります。 | Boolean |
| 背景色のスタイル | 背景色の色のスタイル。 | String |
| データ系列の色のスタイル | データ系列の色のスタイル。 | String |
| データ系列のカスタム色のスタイル | データ系列の色のスタイルをカスタマイズします。 NameValuePairでは、 Name は系列名、 Value は名前、16 進コード、または RGB コードとして指定された色です。 例えば、 red、 #ff0000、 rgb(255, 0, 0)などです。 このプロパティーは データ系列の色のスタイルよりも優先されます。 |
NameValuePair |
| 値ラベルの表示 | グラフ内の各ポイントの上にデータ・ポイント値を表示します。 | Boolean |
| パンくずリストの表示 | このオプションが有効になっている場合、(メニュー選択に応じて) ユーザーがドリルダウンできるツリーの現在位置がタイトルに表示されます。 | Boolean |
| ポイント・サイズ | 値にマークを付けるドットのサイズ。 デフォルト: 2.5 ピクセル。 | Decimal |
| XY 軸の色のスタイル | X 軸と Y 軸の色のスタイル。 | String |
| グリッド・ラインのスタイル | 水平グリッド・ラインのスタイル。 | String |
| X ラベル回転 | X 軸ラベルの回転度数。 | Decimal |
| X 軸の高さ | X 軸の高さ。 | Integer |
| 境界線半径 | グラフの半径です。 | String |
| 埋め込み | グラフの上下左右の埋め込み (ピクセル単位)。 | String |
| 高さ |
グラフの高さ。 | Integer |
以下の表に、線グラフ・ビューの動作構成プロパティーを示します。
グラフで使用できるドリルダウン・ツリーについては、「 ドリルダウン・ツリー」を参照してください。
| 動作構成プロパティー | 説明 | データ・タイプ |
|---|---|---|
| グラフ・データ・モード | グラフ・データをサービスから取り込むか、構成オプションから取り込むかを選択します。 ユーザーがドリルダウンできるツリーは、適切な Ajax アクセスを伴うサービス・フローを使用して取り込むことによってのみ使用できることに注意してください。 | String |
| データ・サービス | データ系列にデータを取り込むサービス。 | Ajax service |
| データ系列 | seriesName はデータ系列の名前で、dataPoints はデータ系列に含めるデータ・ポイントのリストです。 | seriesName の場合は String 、 dataPointsのリストの場合は DataPoint[] 。 |
| メニューを有効にする | メニューの可視性を有効にします。 ユーザーがドリルダウンできるツリーがある場合、またはメニューを追加した場合は、メニューが必要です。 | Boolean |
| Y 軸の目盛りの数 | Y 軸上の目盛りの数。 指定した値は正確な数値と解釈されませんが、最適に表示されるように、最適な目盛り数に調整されます。 | Integer |
| Y 軸の目盛りの精度 | Y 軸の値ラベルに表示する小数点以下の桁数。 小数点以下の桁数のデフォルト値は 0 です。 | Integer |
| Y 軸の最小値 | Y 軸の最小値。 | Decimal |
| Y 軸の最大値 | Y 軸の最大値。 | Decimal |
| X 軸のカリングを使用 | X 軸のデータ目盛りの数だけ表示します。これは、「X 軸の目盛りの最大数」プロパティーの値によって決定されます。 | Boolean |
| X 軸の目盛りの数 | X 軸上の目盛りの数。 指定した値は正確な数値と解釈されませんが、最適に表示されるように、最適な目盛り数に調整されます。 | Integer |
| ツールチップを表示します。 | このオプションが有効になっている場合、マウスをグラフ内のデータ・ポイントの上に移動すると、ツールチップが表示されます。 ツールチップにはポイントの名前とその値の両方が示されます。 | Boolean |
イベント
「イベント」プロパティーでビューのイベント・ハンドラーの設定や変更を行います。 イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。 イベントを定義およびコーディングする方法については、 ユーザー定義イベントを参照してください。 折れ線グラフ・ビューには、以下のタイプのイベント・ハンドラーがあります。- 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 スクリーン・リーダーを使用する必要があります。
方法
折れ線グラフのメソッドについて詳しくは、 折れ線グラフ JavaScript API を参照してください。
その他のリソース
Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」、 「構成」、 「位置決め」、 「可視性」、および 「HTML 属性」) について詳しくは、 「プロパティーの表示」を参照してください。