要素

チャートタイプでは各データセットのスタイルを設定することができますが、同じ方法ですべてのデータセットのスタイルを設定したいことがあります。よくある例として、棒グラフ内のすべての棒を同じ色で描きたいが、一方でデータセットごとに塗りつぶし色を変更したいということがあります。 弧および、線、点、矩形の4種類の要素に対してオプションを設定できます。 設定がなされた場合、このオプションは、データセットに添付された設定によって特に上書きされない限り、そのタイプのすべてのオブジェクトに適用されます。

グローバル設定

要素(element)オプションは、チャートごとあるいはグローバルに設定できます。要素のグローバル設定は Chart.defaults.global.elementsで定義されています。たとえば、すべての棒グラフの境界線幅をグローバルに設定するには、次のようにします。

Chart.defaults.global.elements.rectangle.borderWidth = 2;

点の設定

点要素(point elements)は、線グラフまたはバブルチャートの点を表すために使用されます。

グローバル点設定: Chart.defaults.global.elements.point

名前 型 初期値 説明
radius Number 3 点の半径。
pointStyle String circle 点のスタイル。
rotation Number 0 点の回転角 (度単位)。
backgroundColor Color 'rgba(0,0,0,0.1)' 点の塗りつぶし色。
borderWidth Number 1 点の境界線の幅。
borderColor Color 'rgba(0,0,0,0.1)' 点境界線の色。
hitRadius Number 1 マウスオーバー検出のために点半径に追加される半径(ピクセル単位)。
hoverRadius Number 4 マウスオーバー時の点半径。
hoverBorderWidth Number 1 マウスオーバー時の境界線の太さ。

点のスタイル

pointStyleには、次の値を設定することができます。

  • 'circle'
  • 'cross'
  • 'crossRot'
  • 'dash'
  • 'line'
  • 'rect'
  • 'rectRounded'
  • 'rectRot'
  • 'star'
  • 'triangle'

値が画像の場合、その画像は drawImageを使用してキャンバス上に描画されます。

線の設定

線要素(line elements)は、線グラフの線を表すために使用されます。

グローバル線設定: Chart.defaults.global.elements.line

名前 型 初期値 説明
tension Number 0.4 ベジェ曲線の張力（0でベジェ曲線でなくなる）。
backgroundColor Color 'rgba(0,0,0,0.1)' 線の塗りつぶしの色。
borderWidth Number 3 線の太さ。
borderColor Color 'rgba(0,0,0,0.1)' 線のストロークの色。
borderCapStyle String 'butt' 線のキャップスタイル(端の形状) (MDNを参照)。
borderDash Array [] ラインダッシュ (MDNを参照)。
borderDashOffset Number 0 ラインダッシュオフセット (MDNを参照)。
borderJoinStyle String 'miter ライン結合スタイル (MDNを参照)。
capBezierPoints Boolean true true でベジェコントロールをチャート内に維持します。falseは制限しません。
fill Boolean/String true 塗りつぶしの場所。 'zero', 'top', 'bottom', true ('zero'と同じ) または false (塗りつぶしなし)。(訳注: 面グラフを参照してください。)
stepped Boolean false 線を階段状の線として表示するには 'true' を指定します ('tension' は無視されます)。

矩形の設定

矩形要素(rectangle elements)は、棒グラフの棒を表すために使用されます。

グローバル矩形設定: Chart.defaults.global.elements.rectangle

名前 型 初期値 説明
backgroundColor Color 'rgba(0,0,0,0.1)' 棒の塗りつぶしの色。
borderWidth Number 0 棒の境界線の幅。
borderColor Color 'rgba(0,0,0,0.1)' 棒の境界線の色。
borderSkipped String 'bottom' 境界線を除外します。 'bottom', 'left', 'top' または 'right'。

弧の設定

円弧(arc)は、鶏頭図、ドーナツチャートお​​よび円グラフで使用されます。

グローバル弧設定: Chart.defaults.global.elements.arc.

名前 型 初期値 説明
backgroundColor Color 'rgba(0,0,0,0.1)' 弧の塗りつぶしの色。
borderColor Color '#fff' 弧の境界線の色。
borderWidth Number 2 弧の境界線の太さ。

results matching ""

    No results matching ""