图表概述
图表TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI Chart widget. To add the component to your ASP.NET Core app, you can use either.
该图表使用现代浏览器技术来呈现高质量的数据可视化。所有的图形都在客户端上使用可缩放向量图形(SVG)有了退路帆布．海图支持系列类型集如条，线，区域，子弹，饼，分散，气泡，极地，和其他。
新的Telerik UI为ASP。网络核心?
Telerik UI for ASP。网络核心是一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，请注册一个30天的免费试用。
该图表包含以下内容构建块元素：
- 标题
- 传说
- 图表区
- 图形区
- 轴
- 系列
下图显示了图表的结构。
要查看组件的运行情况，请查看示例:
初始化图表
下面的示例演示如何定义图表。
@(Html.Kendo().Chart(Model) . name ("internetUsersChart") //图表的名称是必填项。它指定小部件的“id”属性。Bar(model => model.Value) //创建绑定到"Value"属性的条形图系列。. name (" u.s. ");}) .CategoryAxis(轴=>轴.Categories(模型=> model. year)))@addTagHelper *，剑道。Mvc . Bar" field="Value" name="United States"> 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 => {series. name). title("国内生产总值增长/GDP年度%/"). legend (legend => legend . position (ChartLegendPosition.Top)).列(新双[]{3.907,7.943,7.848,9.284,9.263,9.801,3.890,8.238,9.552,6.855}).Name("India");系列。列(新双[]{4.743,7.295,7.175,6.376,8.153,8.535,5.247，-7.832,4.3,4.3})。名称(“俄罗斯联邦”);系列。列(新双[]{0.010，-0.375,1.161,0.684,3.7,3.269,1.083，-5.127,3.690,2.995}).Name(" german ");系列。列(新双[]{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 #"))@addTagHelper *，剑道。Mvc 轴标题
您还可以添加一个标题来清楚地指出轴的作用。
@(Html.Kendo(). chart (). name ("chart") . title("平均温度和湿度"). legend (legend => legend . position (ChartLegendPosition.Bottom)). series (series => {series. bottom)。列(新双[]{20,25,32}).Name("Temperature").Axis(" Temperature");系列。列(新双[]{45,50,80}).名称("湿度").轴("湿度");}) . categoryaxis(轴=>轴. categories ("Aug"， "Sep"， "Oct") . axiscrossingvalue (0,3)) . valueaxis(轴=>轴. numeric () . name ("temperature") . title (t=>t.)Text("Temperature, Celsius")) . valueaxis (axis => axis . numeric () . name ("humidity") . title (t=>t. c)) . valueaxis (axis => axis . numeric () . name ("humidity") . title (t=>t. c)) . valueaxis (axis =>) .文本(“相对湿度”))))@addTagHelper *，剑道。Mvc @{var categories = new string[] {"Aug"， "Sep"， "Oct"};} < / series-item > < /系列> < value-axis > < value-axis-item name = "温度" type = "数字" > < chart-value-axis-item-title文本=摄氏温度,“> < / chart-value-axis-item-title > < / value-axis-item > < value-axis-item名称=“湿度”类型=“数字”> < chart-value-axis-item-title文本=“相对湿度> < / chart-value-axis-item-title > < / value-axis-item > < / value-axis > <图例的位置= " ChartLegendPosition。底部"> .
情节乐队
该图表使您能够配置每个轴，以显示预定义值范围的不同颜色的带。类别索引(从零开始)用作类别轴的值。
.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. label)字体("16px Verdana")) . font="16px Verdana功能和特性
事件
你可以订阅所有的图表事件．有关基本图表事件的完整示例，请参阅演示如何使用图表中的事件．
按处理人名称处理
以下示例演示如何通过处理程序名称订阅事件。
@(Html.Kendo().Chart() .Name("chart") .Events(events => events .SeriesClick("onSeriesClick") .DataBound("onDataBound"))) @addTagHelper *，剑道。Mvc 模板委托处理
@(Html.Kendo().Chart< kendo . mvc . example . models . electricityproduction >() .Name("chart") .Events(events => events .SeriesClick(@ function(){//处理seriesClick事件} ) .DataBound(@ function(){//处理dataBound事件} )))引用现有实例
要引用现有的Chart实例，请使用jQuery.data ()配置选项。一旦建立了引用，就使用图表客户端API控制它的行为。
//将以下内容放在ASP。NET核心声明。