# 要素
チャートの種類は各データセットのスタイルを設定するためのオプションを提供しますが、**すべてのデータセットを同じようにスタイル設定したい**場合があります。よくある例としては、棒グラフ内のすべての棒を同じ色でストロークし、データセットごとに塗りつぶしを変更することです。オプションは、**円弧**、**線**、**点**、**棒** の 4 つの異なるタイプの要素に対して設定できます。設定すると、これらのオプションは、データセットに添付された設定によって明示的に上書きされない限り、そのタイプのすべてのオブジェクトに適用されます。
# グローバル設定
要素のオプションは、チャートごとまたはグローバルに指定できます。要素のグローバルオプションは、Chart.defaults.elements で定義されます。たとえば、すべての棒グラフの境界線の幅をグローバルに設定するには、次のようにします。
Chart.defaults.elements.bar.borderWidth = 2;
# 点の設定
点要素は、折れ線グラフ、レーダーチャート、またはバブルチャート内の点を表すために使用されます。
名前空間: options.elements.point、グローバルな点のオプション: Chart.defaults.elements.point。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
radius | 数値 | 3 | 点の半径。 |
pointStyle | pointStyle | 'circle' | 点のスタイル。 |
rotation | 数値 | 0 | 数値 |
backgroundColor | 色 | Chart.defaults.backgroundColor | 点の塗りつぶし色。 |
borderWidth | 数値 | 1 | 数値 |
borderColor | 色 | 'Chart.defaults.borderColor | 点のストローク色。 |
hitRadius | 数値 | 1 | 数値 |
hoverRadius | 数値 | 4 | 数値 |
hoverBorderWidth | 数値 | 1 | 数値 |
# 点のスタイル
# 型
pointStyle 引数は、次の型の入力を受け入れます。string、Image および HTMLCanvasElement
# 情報
文字列が提供される場合、次の値がサポートされます
'circle''cross''crossRot''dash''line''rect''rectRounded''rectRot''star''triangle'false
値が画像またはキャンバス要素である場合、その画像またはキャンバス要素は drawImage (新しいウィンドウで開きます) を使用してキャンバスに描画されます。
# 線設定
線要素は、折れ線グラフの線を表すために使用されます。
名前空間: options.elements.line、グローバルな線のオプション: Chart.defaults.elements.line。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
tension | 数値 | 0 | 数値 |
backgroundColor | 色 | Chart.defaults.backgroundColor | 線の塗りつぶし色。 |
borderWidth | 数値 | 3 | 数値 |
borderColor | 色 | Chart.defaults.borderColor | 線のストローク色。 |
borderCapStyle | 文字列 | 'butt' | 線の先端のスタイル。 MDN (新しいウィンドウで開きます) を参照してください。 |
borderDash | 数値の配列 | [] | 線の破線。 MDN (新しいウィンドウで開きます) を参照してください。 |
borderDashOffset | 数値 | 0.0 | 数値 |
borderJoinStyle | 'round'|'bevel'|'miter' | 'miter' | 線の結合スタイル。 MDN (新しいウィンドウで開きます) を参照してください。 |
capBezierPoints | ブール値 | true | true にすると、ベジェ制御点をチャート内に保持し、false にすると制限を解除します。 |
cubicInterpolationMode | 文字列 | 文字列 | 適用する補間モード。詳細はこちら... |
fill | ブール値|文字列 | false | 線の下の領域をどのように塗りつぶすか。 面積グラフを参照してください。 |
stepped | ブール値 | false | ブール値 |
# 棒の設定
棒要素は、棒グラフの棒を表すために使用されます。
名前空間: options.elements.bar、グローバルな棒のオプション: Chart.defaults.elements.bar。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
backgroundColor | 色 | Chart.defaults.backgroundColor | 棒の塗りつぶし色。 |
borderWidth | 数値 | 0 | 棒のストローク幅。 |
borderColor | 色 | Chart.defaults.borderColor | 棒のストローク色。 |
borderSkipped | 文字列 | 文字列 | スキップされた（除外された）境界線: 'start'、'end'、'middle'、'bottom'、'left'、'top'、'right'、または false。 |
borderRadius | 数値|オブジェクト | 0 | 棒の境界半径（ピクセル単位）。 |
inflateAmount | 数値|'auto' | 'auto' | 描画時に棒の長方形を膨張させるピクセル数。 |
pointStyle | 文字列|Image|HTMLCanvasElement | 'circle' | 凡例の点のスタイル。 |
# 円弧の設定
円弧は、極座標グラフ、ドーナツグラフ、円グラフで使用されます。
名前空間: options.elements.arc、グローバルな円弧のオプション: Chart.defaults.elements.arc。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
angle - 極座標のみ | 数値 | 円周 / (円弧の数) | カバーする円弧の角度。 |
backgroundColor | 色 | Chart.defaults.backgroundColor | 円弧の塗りつぶし色。 |
borderAlign | 'center'|'inner' | 'center' | 円弧のストロークの配置。 |
borderColor | 色 | '#fff' | 円弧のストローク色。 |
borderDash | 数値の配列 | [] | 円弧の破線。 MDN (新しいウィンドウで開きます) を参照してください。 |
borderDashOffset | 数値 | 0.0 | 円弧の破線のオフセット。 MDN (新しいウィンドウで開きます) を参照してください。 |
borderJoinStyle | 'round'|'bevel'|'miter' | 'bevel'|'round' | 線の結合スタイル。 MDN (新しいウィンドウで開きます) を参照してください。borderAlign が 'inner' の場合、デフォルトは 'round' です |
borderWidth | 数値 | 2 | 円弧のストローク幅。 |
circular | ブール値 | true | デフォルトでは、円弧は湾曲しています。circular: false の場合、円弧は平坦になります |