# 折線圖

折線圖是在一條線上繪製資料點的方式。通常，它用於顯示趨勢資料，或兩個數據集的比較。

const config = {
  type: 'line',
  data: data,
};const config = {
  type: 'line',
  data: data,
};

# 數據集屬性

命名空間

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`
`clip`	`數字`\|`物件`\|`false`	-	-	`未定義`
`cubicInterpolationMode`	`字串`	是	-	`'default'`
`data`	`物件`\|`物件[]`\| `數字[]`\|`字串[]`	-	-	必填
`drawActiveElementsOnTop`	`布林值`	是	是	`true`
`fill`	`布林值`\|`字串`	是	-	`false`
`hoverBackgroundColor`	`顏色`	是	-	`未定義`
`hoverBorderCapStyle`	`字串`	是	-	`未定義`
`hoverBorderColor`	`顏色`	是	-	`未定義`
`hoverBorderDash`	`數字[]`	是	-	`未定義`
`hoverBorderDashOffset`	`數字`	是	-	`未定義`
`hoverBorderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是	-	`未定義`
`hoverBorderWidth`	`數字`	是	-	`未定義`
`indexAxis`	`字串`	-	-	`'x'`
`label`	`字串`	-	-	`''`
`order`	`數字`	-	-	`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'`
`segment`	`物件`	-	-	`未定義`
`showLine`	`布林值`	-	-	`true`
`spanGaps`	`布林值`\|`數字`	-	-	`未定義`
`stack`	`字串`	-	-	`'line'`
`stepped`	`布林值`\|`字串`	-	-	`false`
`tension`	`數字`	-	-	`0`
`xAxisID`	`字串`	-	-	第一個 x 軸
`yAxisID`	`字串`	-	-	第一個 y 軸

如果這些值為 未定義，則會回退到選項解析中描述的範圍。

# 一般

名稱	描述
`clip`	如何相對於 chartArea 進行裁剪。正值允許溢位，負值會將 chartArea 內部裁剪這麼多像素。 `0` = 在 chartArea 裁剪。也可以設定每個邊的裁剪：`clip: {left: 5, top: false, right: -2, bottom: 0}`
`drawActiveElementsOnTop`	在數據集的其他點之上繪製數據集的活動點
`indexAxis`	數據集的基礎軸。水平線為 `'x'`，垂直線為 `'y'`。
`label`	數據集的標籤，它會出現在圖例和工具提示中。
`order`	數據集的繪製順序。也會影響堆疊、工具提示和圖例的順序。更多
`stack`	此數據集所屬的群組 ID（當堆疊時，每個群組將是一個單獨的堆疊）。更多
`xAxisID`	要在此數據集上繪製的 x 軸的 ID。
`yAxisID`	要在此數據集上繪製的 y 軸的 ID。

# 點樣式

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

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

如果這些值為 未定義，則會首先回退到數據集選項，然後回退到相關的elements.point.*選項。

# 線條樣式

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

名稱	描述
`backgroundColor`	線條的填充顏色。
`borderCapStyle`	線條的端點樣式。請參閱 MDN （在新視窗中開啟）。
`borderColor`	線條顏色。
`borderDash`	虛線的長度和間距。請參閱 MDN （在新視窗中開啟）。
`borderDashOffset`	線條虛線的偏移量。請參閱 MDN （在新視窗中開啟）。
`borderJoinStyle`	線條的接合樣式。請參閱 MDN （在新視窗中開啟）。
`borderWidth`	線條寬度（以像素為單位）。
`fill`	如何填充線條下的區域。請參閱面積圖。
`tension`	線條的貝茲曲線張力。設定為 0 可繪製直線。如果使用單調三次插值，則會忽略此選項。
`showLine`	如果為 false，則不會繪製此數據集的線條。
`spanGaps`	如果為 true，則會在沒有或空資料的點之間繪製線條。如果為 false，則具有 `null` 資料的點會在線條中產生中斷。也可以是一個數字，指定要跨越的最大間隙長度。值的單位取決於使用的比例。

如果值為 未定義，則這些值會回退到相關的elements.line.*選項。

# 互動

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

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

# cubicInterpolationMode

支援以下插值模式。

'default'
'monotone'

'default' 演算法使用自定義加權三次插值，這會為所有類型的數據集產生令人愉悅的曲線。

'monotone' 演算法更適合 y = f(x) 資料集：它可以保留被插值的資料集的單調性（或分段單調性），並確保局部極值（如果有的話）停留在輸入資料點上。

如果保持不變（undefined），則會使用全域的 options.elements.line.cubicInterpolationMode 屬性。

# 線段

線段樣式可以透過 segment 物件中的可腳本選項覆寫。目前，所有 border* 和 backgroundColor 選項都受到支援。線段樣式會針對每個點之間線的每個區段進行解析。undefined 會回退到主線樣式。

提示

為了能夠設定間隙的樣式，您需要啟用 spanGaps 選項。

可腳本線段的上下文包含以下屬性：

type: 'segment'
p0：第一個點元素
p1：第二個點元素
p0DataIndex：資料陣列中第一個點的索引
p1DataIndex：資料陣列中第二個點的索引
datasetIndex：資料集索引

使用範例

# 階梯式

以下值支援 stepped 屬性。

false：不使用階梯式插值（預設）
true：前階梯式插值（等同於 'before'）
'before'：前階梯式插值
'after'：後階梯式插值
'middle'：中間階梯式插值

如果將 stepped 值設定為 false 以外的任何值，則 tension 會被忽略。

# 預設選項

將組態設定套用到所有建立的折線圖是很常見的需求。全域折線圖設定儲存在 Chart.overrides.line 中。變更全域選項只會影響變更後建立的圖表。現有的圖表不會變更。

例如，若要將所有折線圖設定為 spanGaps = true，您需要執行以下操作：

Chart.overrides.line.spanGaps = true;

# 資料結構

所有支援的資料結構都可以與折線圖一起使用。

# 堆疊面積圖

可以透過變更 y 軸上的設定以啟用堆疊，將折線圖設定為堆疊面積圖。堆疊面積圖可以用來顯示一個資料趨勢是如何由許多較小的部分組成的。

const stackedLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                stacked: true
            }
        }
    }
});

# 垂直折線圖

垂直折線圖是水平折線圖的一種變體。若要實現此效果，您必須將選項物件中的 indexAxis 屬性設定為 'y'。此屬性的預設值為 'x'，因此會顯示水平線。

const config = {
  type: 'line',
  data: data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      }
    }
  }
};const config = {
  type: 'line',
  data: data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      }
    }
  }
};

# 組態選項

垂直折線圖的組態選項與折線圖的組態選項相同。但是，在折線圖中於 x 軸上指定的任何選項，都會套用至垂直折線圖中的 y 軸。

# 內部資料格式

{x, y}

← 圓環圖和餅圖混合圖表類型 →