チャートウィジェットのスタイルオプションは、どれも同じパラメータを使用してチャートの外観を設定します。以下のパラメータの詳細については http://raphaeljs.com/reference.html#Element.attr を参照してください。
fill
- fill パラメータは、塗りつぶし色、グラデーション、または画像を設定します。塗りつぶし色は、16 進値または RGB 色コードを使用して設定できます。
- グラデーションパラメータの動作を確認するには、Barchart クイックスタートを参照してください。
- 型: 文字列型
- 例: {fill: "black"}
fill-opacity
- fill-opacity パラメータは、塗りつぶし色、グラデーション、または画像の不透明度を指定します。
- 型: 数値型
- 例: {"fill-opacity": 0.5}
font
- font パラメータは、チャートテキストに使用されているフォントを指定するオプションと共に使用します。
-
- font-style（normal、italic、oblique）
- font-weight（bold）
- font-size（ピクセル数）
- font-family（"Verdana" または "Arial"、generic:"serif" または "sans-serif"）
- 文字列内の各値はスペースのみで区切って列挙しますが、1 つ例外があります。フォントファミリの代替値は、コンマで区切ります。
- 型: 文字列型
- 構文: "style variant weight size/lineHeight family"
- 例: {font: "italic bold 15px Georgia, serif"}
font-family
- font-family パラメータは、チャートテキストに使用されるフォントを指定するために使用します。
- 型: 文字列型
- 例: {"font-family": "Georgia, serif"}
font-size
- font-size パラメータは、チャートテキストを指定するオプションと共に使用します。
- 型: 数値型
- 例: {"font-size": 20}
font-weight
- font-weight パラメータは、チャートテキストの太さを指定するために使用します。
- 型: 文字列型
- 有効値: normal、bold、bolder、lighter
- 例: {"font-weight": "bolder"}
opacity
- opacity パラメータは、ストロークと塗りつぶしの両方の不透明度を設定するために使用できます。
- 型: 数値型
- 例: {opacity: 0.5}
stroke
- stroke パラメータは、線および図形の周囲の境界を描画するために使用する色を設定するために使用できます。
- 型: 文字列型
- 例: {stroke: "purple"}
stroke-dasharray
- stroke-dasharray パラメータは、線または図形の周囲の境界のタイプを設定します。
- 型: 文字列型
- 有効値: ""、"-"、"."、"-."、"-.."、". "、"- "、"--"、"- ."、"--."、"--.."
- 例: {"stroke-dasharray": "--.."}
stroke-opacity
- stroke-opacity パラメータは、ストローク色固有の不透明度を設定します。
- 型: 数値型
- 例: {"stroke-opacity": 0.5}
stroke-width
- stroke-width パラメータは、線または図形の周囲の境界の幅を設定します。
- 型: 数値型
- 例: {"stroke-width": 4}
transform
- 他の属性から独立しているラベル要素に変換を追加するオプションです。たとえば、transform オプションは X 軸または Y 軸の値を変更しません。
- transform の構文はRaphaelのElement.transformに基づきます。このパラメータは、前回のコマンドに基づく 4 つのコマンドを提供します。また、前回の変換を考慮しない、3 つの絶対変換コマンドも用意されています。
- 型: 文字列型
- コマンド:
- t 変換
- r 回転（オプションパラメータで原点座標を指定可能。デフォルトでは中心点）
- s スケーリング（オプションパラメータで原点座標を指定可能。デフォルトでは中心点）
- m マトリックス（6 つのパラメータを指定可能）
- 絶対変換コマンド:
- T 変換
- R 回転（オプションパラメータで原点座標を指定可能。デフォルトでは中心点）
- S スケーリング（オプションパラメータで原点座標を指定可能。デフォルトでは中心点）
- 例: chartLabelStyle: {transform: "R90T10 0"}
- このスクリプトでは transform 属性を使用して、テキストを 90 度回転させ（R90）、原点（0）から 10 ピクセル移動（T10）させます。
関連トピック
