图表概述
Telerik UI Chart HtmlHelper for ASP。NET MVCis a server-side wrapper for the Kendo UI Chart widget.
图表使用现代浏览器技术来呈现高质量的数据可视化。所有图形都是在客户端使用可缩放矢量图形(SVG)有了退路帆布。图表支持系列类型集如条，线，区域，子弹，饼，分散，气泡，极地等。
新的Telerik UI为ASP。净MVC吗?
Telerik UI for ASP。NET MVC是一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。
该图表包括以下内容构建块元素：
- 标题
- 传说
- 图表区
- 图形区
- 轴
- 系列
下图显示了图表的结构。
要查看组件的运行情况，请检查示例:
初始化图表
下面的示例演示如何定义图表。
@(Html.Kendo().Chart(Model) . name ("internetUsersChart") //图表的名称是必填的。它指定了“id”小部件的属性。.Title系列(“网民”).Series(= >{系列。Bar(model => model.Value) //创建一个绑定到"Value"属性的柱状图系列。. name ("United States");}) .CategoryAxis(axis => axis .Categories(model => model. year)))public ActionResult Index(){返回视图(ChartDataRepository.InternetUsers());}基本配置
要配置图表，将配置选项作为属性传递:
@(Html.Kendo(). chart (). name ("chart") . title("国内生产总值增长/GDP年度%/"). legend (legend => legend . position (ChartLegendPosition.Top)). chartArea (chartArea => chartArea . background ("transparent")). series (series =>{系列。列(new double[] {3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855}).Name("印度");系列。列(新double[]{4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247， -7.832, 4.3, 4.3})。名称(“俄罗斯联邦”);系列。列(新double[] {0.010， -0.375, 1.161, 0.684, 3.7, 3.269, 1.083， -5.127, 3.690, 2.995}).Name("Germany");系列。列(新double[] {1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333， -2.245, 4.339, 2.727}).Name("World");}) .CategoryAxis(轴= >轴. name (series-axis) .Line(= >行line.Visible(假))).CategoryAxis(轴= >轴. name (label-axis) .Categories(“2002”、“2003”、“2004”、“2005”、“2006”、“2007”、“2008”、“2009”、“2010”、“2011”)).ValueAxis(轴= >轴.Numeric () .Labels(标签= > labels.Format({0} %)) / /移动label-axis轴价值。.AxisCrossingValue (0, int.MinValue)) .Tooltip(提示= >提示.Visible(真正的).Format ({0} %) .Template(“# = series.name #:#= value #"))轴标题
您还可以添加一个标题，以清楚地指示轴的角色。
@(Html.Kendo(). chart (). name ("chart") . title("平均温度和湿度"). legend (legend => legend . position (ChartLegendPosition.Bottom)). series (series =>{系列。列(新双[]{20,25,32}).Name("温度").Axis("温度");系列。列(新双[]{45,50,80}).Name("湿度").Axis("湿度");}) . categoryaxis (axis =>轴。categories ("Aug"， "Sep"， "Oct") . axiscrossingvalue (0,3)) . valueaxis (axis =>轴。numeric () . name ("temperature") . title (t=>t. 10。Text("Temperature, Celsius"))) . valueaxis (axis => axis . numeric () . name (" moisture ") . title (t=>t. c。文本(“相对湿度”))))
情节乐队
图表允许您配置每个轴，以显示预定义值范围的不同颜色的带。类别索引(从零开始)用作类别轴的值。
.ValueAxis(axis => axis. numeric () .Labels(labels => labels. format ("{0:N0}")) .MajorUnit(10000) .Max(70000) .Line(line => line. visible (false)) .PlotBands(bands => {bands. add ().From(10000).To(30000).Color("#c00").不透明(0.3);bands.Add() .从(30000),(30500).Color(“# c00”).Opacity (0.8);}))
全局设置
您可能还需要应用影响所有轴的全局设置。在这种情况下，使用AxisDefaults。
. axisdefaults (a=> a . labels (l=>l. labels)字体("16px Verdana")))功能和特性
事件
你可以订阅所有的图表事件。有关基本图表事件的完整示例，请参阅演示如何使用图表的事件。
按处理程序名称处理
下面的示例演示如何通过处理程序名称订阅事件。
@(Html.Kendo().Chart< kendo . mv . examples . models . electricityproduction >() .Name("chart") .Events(events => events .SeriesClick("onSeriesClick") .DataBound("onDataBound")))) . e){//处理dataBound事件模板委托处理
@(Html.Kendo().Chart< kendo . mv . example . models . electricityproduction >() .Name("chart") .Events(events => events .SeriesClick(@ function(){//处理seriesClick事件} ) .DataBound(@ function(){//处理dataBound事件} ))))引用现有实例
要引用现有的Chart实例，请使用jQuery.data ()配置选项。建立了引用之后，使用图表客户端API控制它的行为。
//在ASP. ASP. Chart后面放置以下内容。NET MVC声明。