# 元素
雖然圖表類型提供了設定來配置每個資料集的樣式，但有時您會希望以相同方式設定所有資料集的樣式。一個常見的例子是在長條圖中用相同的顏色描繪所有長條的邊框，但更改每個資料集的填充顏色。可以為四種不同類型的元素配置選項：弧形、線條、點和長條。設定後，這些選項會套用到該類型的所有物件，除非資料集附加的設定特別覆寫它們。
# 全域設定
可以為每個圖表或全域指定元素選項。元素的全域選項在 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 | number |
backgroundColor | 顏色 | Chart.defaults.backgroundColor | 點填充顏色。 |
borderWidth | number | 1 | number |
borderColor | 顏色 | 'Chart.defaults.borderColor | 點邊框顏色。 |
hitRadius | number | 1 | number |
hoverRadius | number | 4 | number |
hoverBorderWidth | number | 1 | number |
# 點樣式
# 類型
pointStyle 引數接受以下類型的輸入：string、Image 和 HTMLCanvasElement
# 資訊
當提供字串時，支援以下值
'circle''cross''crossRot''dash''line''rect''rectRounded''rectRot''star''triangle'false
如果值是影像或畫布元素，則會使用 drawImage (在新視窗開啟)在畫布上繪製該影像或畫布元素。
# 線條設定
線條元素用於表示折線圖中的線條。
命名空間：options.elements.line，全域線條選項：Chart.defaults.elements.line。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
tension | number | 0 | number |
backgroundColor | 顏色 | Chart.defaults.backgroundColor | Line fill color. |
borderWidth | number | 3 | number |
borderColor | 顏色 | Chart.defaults.borderColor | 線條邊框顏色。 |
borderCapStyle | string | 'butt' | 線條端點樣式。請參閱 MDN (在新視窗開啟)。 |
borderDash | number[] | [] | 線條虛線。請參閱 MDN (在新視窗開啟)。 |
borderDashOffset | number | 0.0 | number |
borderJoinStyle | 'round'|'bevel'|'miter' | 'miter' | 線條連接樣式。請參閱 MDN (在新視窗開啟)。 |
capBezierPoints | boolean | true | true 將貝茲曲線控制點保持在圖表內，false 則不限制。 |
cubicInterpolationMode | string | 'default' | 要套用的內插模式。查看更多... |
fill | boolean|string | false | 如何填充線條下方的區域。請參閱面積圖。 |
stepped | boolean | false | boolean |
# 長條設定
長條元素用於表示長條圖中的長條。
命名空間：options.elements.bar，全域長條選項：Chart.defaults.elements.bar。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
backgroundColor | 顏色 | Chart.defaults.backgroundColor | 長條填充顏色。 |
borderWidth | number | 0 | 長條邊框寬度。 |
borderColor | 顏色 | 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 | 圓周 / (弧形計數) | 要覆蓋的弧形角度。 |
backgroundColor | 顏色 | Chart.defaults.backgroundColor | 弧形填充顏色。 |
borderAlign | 'center'|'inner' | 'center' | 弧形邊框對齊方式。 |
borderColor | 顏色 | '#fff' | 弧形邊框顏色。 |
borderDash | number[] | [] | 弧形虛線。請參閱 MDN (在新視窗開啟)。 |
borderDashOffset | number | 0.0 | 弧形虛線偏移量。請參閱 MDN (在新視窗開啟)。 |
borderJoinStyle | 'round'|'bevel'|'miter' | 'bevel'|'round' | 線條連接樣式。請參閱 MDN (在新視窗開啟)。當 borderAlign 為 'inner' 時，預設值為 'round' |
borderWidth | number | 2 | 弧形邊框寬度。 |
circular | boolean | true | boolean |