ローソク足の書式設定

CandlestickChart ウィジェットのローソク足を、style オプションを使用したいくつかの方法で書式設定できます。ローソク足の書式にアクセスするには、seriesStyles 、 candlestickFormatterの 2 つの API オプションを使用します。また、 seriesHoverStyles オプションを使用すると、ユーザーがローソク足にカーソルを合わせたときに、ローソク足の書式が変わるように指定できます。これらのオプションを使用して、ローソク足のさまざまな部分にアクセスできます。

ローソク足の書式の最適な使用方法は、個々のローソク足に対する株価の上下に基づいて条件を作成し、ローソク足本体の色をこの条件に従って設定する方法です。この設定方法と実際のウィジェットについては、「操作手順」の「条件付き書式の設定」で確認できます。

candlestickFormatter

CandlestickChart の各タイプのデータポイントは、それぞれ異なる要素の組み合わせで構成されます。要素は obj.eles、要素のデータは obj.data として表されます。次の表は、ローソク足チャートの各タイプと、その構成要素の一覧を示します。

タイプ	要素（obj.eles）	データ（obj.data）
candlestick	high ローソクの上ひげ上端 low ローソクの下ひげの下端 openClose ローソク本体の上端から下端まで	high（高値） low（安値） open（始値） close（終値）
ohlc	open ローソク本体の左側の水平線 close ローソク本体の右側の水平線 highLow ローソク本体の上端から下端まで	high（高値） low（安値） open（始値） close（終値）
hl	highLow ローソク本体の上端から下端まで	high（高値） low（安値）

各タイプのチャートに関するサンプルコードは、次のとおりです。

candlestick タイプのサンプルコード

ドキュメントの ready 関数内の wijcandlestickchart スクリプト内で使用します	コードのコピー
candlestickFormatter: function (obj) { var eles = obj.eles, data = obj.data, open = data.open, high = data.high, low = data.low, close = data.close, highEle = eles.high, lowEle = eles.low, openCloseEle = eles.openClose, style = {}; if (open > close) { style.fill = "Red"; style.stroke = style.fill; } else { style.fill = "Green"; style.stroke = style.fill; } openCloseEle.attr(style); }

ohlc タイプのサンプルコード

ドキュメントの ready 関数内の wijcandlestickchartスクリプト内で使用します	コードのコピー
candlestickFormatter: function (obj) { var eles = obj.eles, data = obj.data, open = data.open, close = data.close, hlEl = eles.highLow, oEl = eles.open, cEl = eles.close, style = {}; if (open > close) { style.stroke = "rgb(96,189,104)"; } else { style.stroke = "rgb(241,88,84)"; } hlEl.attr(style); oEl.attr(style); cEl.attr(style); }

hi タイプのサンプルコード

ドキュメントの ready 関数内の wijcandlestickchart スクリプト内で使用します	コードのコピー
candlestickFormatter: function (obj) { var eles = obj.eles, data = obj.data, high = data.high, low = data.low, hlEle = eles.highLow, style = {}; if (high - low > 5) { style.stroke = "rgb(96,189,104)"; } else { style.stroke = "rgb(241,88,84)"; } hlEle.attr(style); }

seriesStyles と seriesHoverStyles

チャートの個々の系列には、seriesStyles と seriesHoverStyles を異なる組み合わせで使用できます。各タイプのチャートで使用可能なスタイルは、次のとおりです。

タイプ	スタイル名
candlestick	highLow ローソクの上ひげおよび下ひげに使用するスタイル fallingClose 終値が始値より低い場合に、ローソク本体に使用するスタイル risingClose 終値が始値より高い場合に、ローソク本体に使用するスタイル unchangeClose 終値と始値が同じ場合に、ローソク本体に使用するスタイル
ohlc	open ローソク本体の左側の水平線に使用するスタイル close ローソク本体の右側の水平線に使用するスタイル highLow ローソク本体に使用するスタイル
hl	highLow ローソク本体に使用するスタイル