跳到主要內容
+

圖表 - 區域圖示範

此頁面群組使用區域圖表的示範。

SimpleAreaChart

- MUI 元件庫Page APage BPage CPage DPage EPage FPage G01,0002,0003,0004,000
按下 Enter 開始編輯
- MUI 元件庫Page APage BPage CPage DPage EPage FPage G02,0004,0006,0008,00010,00012,000
- MUI 元件庫
按下 Enter 開始編輯
- MUI 元件庫FebruaryMarchAprilMayJuneJuly020406080100
按下 Enter 開始編輯

AreaChartFillByValue

若要在區域中顯示多種顏色,您可以指定漸層來填滿區域(相同的方法可以應用於其他 SVG 元件)。

您可以將此漸層定義作為 <LineChart /> 的子元素傳遞,並使用 sx 覆寫區域 fill 屬性。為此,您需要使用 <linearGradient /><stop /> SVG 元素。

第一步是取得 SVG 的總高度。這可以使用 useDrawingArea Hook 完成。將 <linearGradient /> 定義為從 SVG 容器頂部到底部的向量非常有用。

然後為了定義漸層應從一種顏色切換到另一種顏色的位置,您可以使用 useYScale Hook 來取得值 0 的 y 座標。

API

請參閱以下文件,以取得此處提及之元件的所有 props 和 classes 的完整參考。