#要素
グラフの種類には各データセットのスタイルを構成するための設定が用意されていますが、場合によってはスタイルを設定したい場合があります。すべてのデータセットを同じ方法で。一般的な例は、棒グラフ内のすべての棒を同じ色で描画しますが、データセットごとに塗りつぶしを変更することです。オプションは 4 つの異なるタイプの要素に対して構成できます。アーク、行、ポイント、 とバー。これらのオプションを設定すると、データセットにアタッチされた構成によって特にオーバーライドされない限り、そのタイプのすべてのオブジェクトに適用されます。
#グローバル構成
要素のオプションは、チャートごとに指定することも、グローバルに指定することもできます。要素のグローバル オプションは次のように定義されます。Chart.defaults.elements
。たとえば、すべての棒グラフの境界線の幅をグローバルに設定するには、次のようにします。
Chart.defaults.elements.bar.borderWidth = 2;
#ポイント構成
ポイント要素は、折れ線グラフ、レーダー チャート、またはバブル チャート内のポイントを表すために使用されます。
名前空間:options.elements.point
、グローバル ポイント オプション:Chart.defaults.elements.point
。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
radius | number | 3 | ポイントの半径。 |
pointStyle | pointStyle | 'circle' | ポイントスタイル。 |
rotation | number | 0 | 点の回転 (度単位)。 |
backgroundColor | Color | Chart.defaults.backgroundColor | ポイントの塗りつぶしの色。 |
borderWidth | number | 1 | ポイントのストローク幅。 |
borderColor | Color | 'Chart.defaults.borderColor | ポイントストロークの色。 |
hitRadius | number | 1 | ヒット検出のためにポイント半径に追加の半径が追加されました。 |
hoverRadius | number | 4 | ホバー時のポイントの半径。 |
hoverBorderWidth | number | 1 | ホバー時のストローク幅。 |
#ポイントスタイル
#種類
のpointStyle
引数は次のタイプの入力を受け入れます。string
、Image
とHTMLCanvasElement
#情報
文字列を指定すると、次の値がサポートされます。
'circle'
'cross'
'crossRot'
'dash'
'line'
'rect'
'rectRounded'
'rectRot'
'star'
'triangle'
false
値が画像またはキャンバス要素の場合、その画像またはキャンバス要素は次を使用してキャンバス上に描画されます。描画イメージ (新しいウィンドウが開きます)。
#回線構成
線要素は、折れ線グラフの線を表すために使用されます。
名前空間:options.elements.line
、グローバル ライン オプション:Chart.defaults.elements.line
。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
tension | number | 0 | ベジェ曲線張力 (0 ベジェ曲線がない場合)。 |
backgroundColor | Color | Chart.defaults.backgroundColor | 線の塗りつぶしの色。 |
borderWidth | number | 3 | 線のストロークの幅。 |
borderColor | Color | Chart.defaults.borderColor | 線のストロークの色。 |
borderCapStyle | string | 'butt' | ラインキャップスタイル。見るMDN (新しいウィンドウが開きます)。 |
borderDash | number[] | [] | ラインダッシュ。見るMDN (新しいウィンドウが開きます)。 |
borderDashOffset | number | 0.0 | 破線のオフセット。見るMDN (新しいウィンドウが開きます)。 |
borderJoinStyle | 'round' |'bevel' |'miter' | 'miter' | 線結合スタイル。見るMDN (新しいウィンドウが開きます)。 |
capBezierPoints | boolean | true | true ベジェ制御をチャート内に維持するため、false 制限はありません。 |
cubicInterpolationMode | string | 'default' | 適用する補間モード。続きを見る... |
fill | boolean |string | false | 線の下の領域を埋める方法。見る面グラフ。 |
stepped | boolean | false | true 線を階段状の線として表示するには (tension 無視されます)。 |
#バーの構成
棒要素は、棒グラフ内の棒を表すために使用されます。
名前空間:options.elements.bar
、グローバル バー オプション:Chart.defaults.elements.bar
。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
backgroundColor | Color | Chart.defaults.backgroundColor | バーの塗りつぶしの色。 |
borderWidth | number | 0 | バーのストローク幅。 |
borderColor | Color | Chart.defaults.borderColor | バーのストロークの色。 |
borderSkipped | string | 'start' | スキップされた (除外された) 境界線:'start' 、'end' 、'middle' 、'bottom' 、'left' 、'top' 、'right' またfalse 。 |
borderRadius | number |object | 0 | バーの境界線の半径 (ピクセル単位)。 |
inflateAmount | number |'auto' | 'auto' | 描画時にバー長方形を膨張させるピクセルの量。 |
pointStyle | string |Image |HTMLCanvasElement | 'circle' | 凡例のポイントのスタイル。 |
#アーク構成
円弧は極地、ドーナツ、円グラフで使用されます。
名前空間:options.elements.arc
、グローバル円弧オプション:Chart.defaults.elements.arc
。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
angle - 極性のみ | number | circumference / (arc count) | カバーする円弧の角度。 |
backgroundColor | Color | Chart.defaults.backgroundColor | 円弧の塗りつぶしの色。 |
borderAlign | 'center' |'inner' | 'center' | 円弧ストロークの位置合わせ。 |
borderColor | Color | '#fff' | 円弧のストロークの色。 |
borderDash | number[] | [] | アークラインダッシュ。見るMDN (新しいウィンドウが開きます)。 |
borderDashOffset | number | 0.0 | 円弧線の破線のオフセット。見るMDN (新しいウィンドウが開きます)。 |
borderJoinStyle | 'round' |'bevel' |'miter' | 'bevel' |'round' | 線結合スタイル。見るMDN (新しいウィンドウが開きます)。デフォルトは'round' いつborderAlign は'inner' |
borderWidth | number | 2 | 円弧のストローク幅。 |
circular | boolean | true | デフォルトでは、円弧は曲線になっています。もしもcircular: false 弧は平らになります |