キーや凡例を使う

Property	Description	Default
key	キー要素の配列（これはキーで表示するテキストになります。	(空の配列)
keyHalign	キーの水平方向の配置	right
keyPosition	キーの位置/レイアウトが決定されます。	graph
keyPositionMarginBoxed	false
keyPositionGraphBoxed	key がグラフ モードのときボックスの中にあるかどうかを決定します。	true
keyPositionX	これでキーのX座標を指定することができます。	null
keyPositionY	これにより、キーのY座標を指定できます。	false
keyShadowOffsetx	シャドウのXオフセットをコントロールします。	2
keyShadowOffsety	これは、シャドウのYオフセットをコントロールします。	#666
keyShadowBlur	シャドウに適用されるぼかしを制御します。	3
keyColors	計算された色が見たい色でない場合、これは独自の色を指定できます。	null
keyColorShape	これはカラーブロブが取る形です。	四角形（形状の配列も可能）
keyBackground	キーの背景を指定します。	white
keyRounded	キーの角を四角にするか丸くするか。	true
keyLinewidth	キーに使用する線幅を指定します。	1
keyLabelsFont	キーのテキストに使用されるフォントです。
keyLabelsColor	キー内のテキストの色。	black
keyLabelsBold	キー内のテキストが太字かどうかを指定します。	false
keyLabelsItalic	キー内のテキストがイタリックかどうか。	false
keyLabelsOffsetx	キーテキストへのX座標に適用されるオフセットを指定します。	0
keyLabelsOffsety	キーテキストのY座標に適用されるオフセットです。	0
keyTextAccessible	デフォルトでは、キー テキストはアクセスできませんが、この設定を使用すると、これを上書きすることができます。 すべてのチャートタイプがこれをサポートしているわけではありません。	false
keyInteractiveHighlightChartFill	インタラクティブキーでチャートをハイライトするために使用するハイライトフィル色	rgba(255,255,255,0.0).7)
keyInteractiveHighlightChartStroke	The highlight stroke color used to highlight the chart by the interactive key.	black

key
A array of key elements (this is the text that is displayed in the key.
Default.Of the key elements: (空の配列)
keyHalign
キーの水平アライメント
Default: right
keyPosition
キーの位置/レイアウトを決定する。
Default: graph
keyPositionMarginBoxed
key が margin モードの場合、ボックス内に配置されるかどうかを決定します。
Default: false
keyPositionGraphBoxed
key が graph モードの場合、ボックスに配置かどうかを決定します。
Default: true
keyPositionX
key のX座標を設定することが可能です。
Default: null
keyPositionY
キーのY座標を指定します。
Default: null
keyShadow
キーに影があるかないかを制御します。
Default: false
keyShadowOffsetx
これは、シャドウのXオフセットを制御します。
Default: 2
keyShadowOffsety
これは、シャドウのYオフセットを制御します。
Default: 3
keyColors
計算された色が見たい色でない場合、これは独自の色を指定することができます。
Default: null
keyColorShape
これは色の塊が取る形状を表します。
Default: square (can be a array of shapes)
keyBackground
The background of the key.
Default: white
keyRounded
keys of the corners are square or rounded.これは、キーの角が四角か丸かどうかを指定します。
Default: true
keyLinewidth
キーに使用される線幅.
Default: 1
keyLabelsFont
キーテキストに使用するフォント.
Default: 1
keyLabelsFont
キーに使用するフォント.Definition: true
Default: 1
keyLabelFontkeyLabelsSize
キーのテキストの大きさ.
Default:
keyLabelsColor
キー中のテキストの色
Default: black
keyLabelsBold
キー中のテキストが太字かどうか。
Default: false
keyLabelsItalic
キー内のテキストがイタリックかどうか。
Default: false
keyLabelsOffsetx
キーテキストへのX座標に適用されるオフセットを指定します。
Default: 0
keyLabelsOffsety
キーテキストのY座標に適用されるオフセット。
Default: 0
keyTextAccessible
デフォルトではキーテキストはアクセスできませんが、この設定によりこれをオーバーライドできます。
Default: false
keyInteractiveHighlightChartFill
インタラクティブキーでチャートをハイライトするために使用されるハイライト塗りつぶし色
Default: rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
HighlightStroke 色は、インタラクティブ キーでチャートをハイライトするために使用されます。 したがって、イベント リスナーでは、次のようにキー エントリを判断できます。

key = RGraph.Registry.get('key-element');

そして、このような使い方ができます。

// Assume that the  variable is your line chart objectline.canvas.onmousemove = function (e){ var key = RGraph.Registry.get('key-element'); if (key) { // Log the details of the object to the console console.log(key); }};

Using interactive keys on your charts

以前は、対話型キーは線グラフと円グラフに対してのみ実装されていました。 しかし、2013 年半ばの時点で書き直され、より多くのチャート タイプで利用できるようになりました。 インタラクティブ・キーのデモ・ページがダウンロード・アーカイブにあります。

書き直されたインタラクティブキーは、描画 API Rect オブジェクトとダイナミックライブラリを使用するようになりました。

<script src="RGraph.common.core.js"></script><script src="RGraph.common.dynamic.js"></script><script src="RGraph.common.key.js"></script><script src="RGraph.drawing.rect.js"></script><script> line = new RGraph.Line({ id: 'cvs', data: , , ], options: { xaxisLabels: , tickmarksStyle: 'endcircle', linewidth: 3, xaxisTickmarksCount: 12, spline: true, key: , keyPosition: 'margin', keyInteractive: true, textSize: 14 } }).draw();</script>

HTML キー

2013 年 12 月に RGraph に機能が追加され、チャートの横に HTML ベースのキーを使用できるようになりました。 このキーは DIV タグと SPAN タグで構成されているため、より簡単に操作できると思われます。 HTMLキーについては、こちらのページで詳しく解説しています。