面积图

Telerik UI区域图表TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI Area Chart widget.

区域图适用于使用连续的线穿过由项目值定义的点来显示定量数据。

• 区域图表HtmlHelper的演示页面

• 区域图表TagHelper的演示页面

开始

曲线下面的部分为每个系列用特定的颜色填充。区域图中的不同颜色有助于强调来自几组相似数据的值的变化。

若要在图表组件中创建区域系列，请使用区域而且VerticalArea在系列配置。

• 配置坐标轴
• 配置线条样式

配置坐标轴

要配置坐标轴，请使用CategoryAxis而且ValueAxis．还支持多个值轴。

@(Html.Kendo(). chart (). name ("chart") . title ("Internet Users") . legend (legend => legend . position (ChartLegendPosition.Bottom)). seriesDefaults (seriesDefaults => seriesDefaults. area ()). series (series => {series. bottom)。区(新双[]{20,15.7,16.7,23.5,26.6}). name(“世界”);系列。区域(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States"); }) .CategoryAxis(axis => axis .Categories(new string[] { "2005", "2006", "2007", "2008", "2009" }) ) .ValueAxis(axis => axis .Labels(labels => labels.Format("{0}%")) ) )

@addTagHelper *，剑道。Mvc @{var categories = new string[] {"2005"， "2006"， "2007"， "2008"， "2009"};}                      

上一个示例中的配置产生了下面的区域图。

配置字体样式

区域图通过使用不同的样式支持点之间的线的呈现。方法设置支持的样式line.style选择。

区域图支持以下样式:

• normal—默认样式。它在数据点之间产生一条直线。
• Step-The样式通过垂直线和水平线呈现数据点之间的连接。它适用于表示变化之间的值是恒定的。
• 平滑—这种样式使区域图通过数据点显示一条拟合曲线。当数据需要用曲线显示时，或者当您希望用平滑的线而不是直线连接点时，它是适用的。

下图显示了一个平滑的区域图表。

另请参阅

• 区域图表HtmlHelper的基本用法。NET Core(演示)
• 区域图表TagHelper的基本用法。NET Core(演示)
• 服务器端API