跳到内容
+

图表 - 区域演示

此页面展示了区域图的演示。

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

请参阅下面的文档,以获取此处提及的组件的所有可用属性和类的完整参考。