# 雷達圖

雷達圖是一種顯示多個數據點及其之間變化的方法。

它們通常用於比較兩個或多個不同數據集的點。

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};

# 資料集屬性

命名空間

data.datasets[index] - 僅此資料集的選項
options.datasets.line - 所有折線資料集的選項
options.elements.line - 所有折線元素的選項
options.elements.point - 所有點元素的選項
options - 整張圖表的選項

雷達圖允許為每個資料集指定多個屬性。這些屬性用於設定特定資料集的顯示屬性。例如，通常以這種方式設定線條的顏色。

名稱	類型	可腳本化	可索引	預設值
`backgroundColor`	`顏色`	是	-	`'rgba(0, 0, 0, 0.1)'`
`borderCapStyle`	`字串`	是	-	`'butt'`
`borderColor`	`顏色`	是	-	`'rgba(0, 0, 0, 0.1)'`
`borderDash`	`數字[]`	是	-	`[]`
`borderDashOffset`	`數字`	是	-	`0.0`
`borderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是	-	`'miter'`
`borderWidth`	`數字`	是	-	`3`
`hoverBackgroundColor`	`顏色`	是	-	`未定義`
`hoverBorderCapStyle`	`字串`	是	-	`未定義`
`hoverBorderColor`	`顏色`	是	-	`未定義`
`hoverBorderDash`	`數字[]`	是	-	`未定義`
`hoverBorderDashOffset`	`數字`	是	-	`未定義`
`hoverBorderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是	-	`未定義`
`hoverBorderWidth`	`數字`	是	-	`未定義`
`clip`	`數字`\|`物件`\|`false`	-	-	`未定義`
`data`	`數字[]`	-	-	必要
`fill`	`布林值`\|`字串`	是	-	`false`
`label`	`字串`	-	-	`''`
`order`	`數字`	-	-	`0`
`tension`	`數字`	-	-	`0`
`pointBackgroundColor`	`顏色`	是	是	`'rgba(0, 0, 0, 0.1)'`
`pointBorderColor`	`顏色`	是	是	`'rgba(0, 0, 0, 0.1)'`
`pointBorderWidth`	`數字`	是	是	`1`
`pointHitRadius`	`數字`	是	是	`1`
`pointHoverBackgroundColor`	`顏色`	是	是	`未定義`
`pointHoverBorderColor`	`顏色`	是	是	`未定義`
`pointHoverBorderWidth`	`數字`	是	是	`1`
`pointHoverRadius`	`數字`	是	是	`4`
`pointRadius`	`數字`	是	是	`3`
`pointRotation`	`數字`	是	是	`0`
`pointStyle`	`pointStyle`	是	是	`'circle'`
`spanGaps`	`布林值`	-	-	`未定義`

所有這些值如果為 undefined，則會回退到選項解析中描述的範圍

# 通用設定

名稱	描述
`clip`	如何相對於圖表區域剪裁。正值允許溢位，負值則會在圖表區域內剪裁這麼多像素。`0` = 在圖表區域剪裁。也可以設定每邊的剪裁：`clip: {left: 5, top: false, right: -2, bottom: 0}`
`label`	資料集的標籤，會顯示在圖例和工具提示中。
`order`	資料集的繪製順序。也會影響工具提示和圖例的順序。更多

# 點樣式

可以使用以下屬性控制每個點的樣式

名稱	描述
`pointBackgroundColor`	點的填充顏色。
`pointBorderColor`	點的邊框顏色。
`pointBorderWidth`	點邊框的寬度（以像素為單位）。
`pointHitRadius`	非顯示點響應滑鼠事件的像素大小。
`pointRadius`	點形狀的半徑。如果設定為 0，則不會渲染點。
`pointRotation`	點旋轉的角度（以度為單位）。
`pointStyle`	點的樣式。更多...

所有這些值如果為 undefined，則會先回退到資料集選項，然後回退到關聯的elements.point.* 選項。

# 線條樣式

可以使用以下屬性控制線條的樣式

名稱	描述
`backgroundColor`	線條填充顏色。
`borderCapStyle`	線條的端點樣式。請參閱MDN (開啟新視窗)。
`borderColor`	線條顏色。
`borderDash`	虛線的長度和間距。請參閱MDN (開啟新視窗)。
`borderDashOffset`	線條虛線的偏移量。請參閱MDN (開啟新視窗)。
`borderJoinStyle`	線條的接合樣式。請參閱MDN (開啟新視窗)。
`borderWidth`	線條的寬度（以像素為單位）。
`fill`	如何填充線條下方的區域。請參閱面積圖。
`tension`	線條的貝茲曲線張力。設定為 0 可繪製直線。
`spanGaps`	如果為 true，則會在沒有或 null 數據的點之間繪製線條。如果為 false，則具有 `null` 數據的點會在線條中建立中斷。

如果值為 undefined，則這些值會回退到關聯的 elements.line.* 選項。

# 互動

可以使用以下屬性控制與每個點的互動

名稱	描述
`pointHoverBackgroundColor`	滑鼠懸停時的點背景顏色。
`pointHoverBorderColor`	滑鼠懸停時的點邊框顏色。
`pointHoverBorderWidth`	滑鼠懸停時的點邊框寬度。
`pointHoverRadius`	滑鼠懸停時的點半徑。

# 比例尺選項

雷達圖僅支援單一比例尺。此比例尺的選項定義在 scales.r 屬性中，可以從線性徑向軸頁面引用。

options = {
    scales: {
        r: {
            angleLines: {
                display: false
            },
            suggestedMin: 50,
            suggestedMax: 100
        }
    }
};

# 預設選項

通常會希望將組態設定套用至所有建立的雷達圖。全域雷達圖設定儲存在 Chart.overrides.radar 中。變更全域選項只會影響變更後建立的圖表。現有的圖表不會變更。

# 資料結構

雷達圖的資料集 data 屬性指定為數字陣列。資料陣列中的每個點都對應於相同索引處的標籤。

data: [20, 10]

對於雷達圖，為了提供每個點的含義，我們包含一個字串陣列，該陣列會顯示在圖表中每個點的周圍。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

# 內部資料格式

{x, y}

← 極地區域圖散佈圖 →