ASP。. NET核心图表概述

Telerik UI Chart TagHelper和HtmlHelper网络核心是Kendo UI Chart小部件的服务器端包装器。要将组件添加到您的ASP。. NET Core应用程序，您可以使用其中之一。

图表使用现代浏览器技术来呈现高质量的数据可视化。所有图形都在客户端上通过使用可缩放矢量图形(SVG)有一个回退到帆布。图表支持系列类型集如条形、直线形、区域形、子弹形、饼形、散点形、气泡形、极坐标形等。

新的Telerik UI为ASP。网络核心?

面向ASP的Telerik UI。网络核心是一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

图表包含以下内容构建块元素：

• 标题
• 传说
• 图表区
• 图形区
• 轴
• 系列

下图显示了图表的结构。

要查看该组件的实际操作，请查看示例:

• 图表HtmlHelper的演示页面
• 图表标签助手的演示页面

初始化图表

下面的示例演示如何定义图表。

@(Html.Kendo().Chart(Model) . name ("internetUsersChart") //图表名称是必填的。它指定小部件的"id"属性。title ("Internet Users") . series (series => {series.})Bar(model => model.Value) //创建绑定到"Value"属性的条形图系列。}) .CategoryAxis(axis => axis .Categories(model => model. year))

@addTagHelper *，剑道。Mvc          

public ActionResult Index() {return View(chartdatareposiitory . internetusers ());}

基本配置

要配置图表，将配置选项作为属性传递:

@(Html.Kendo(). chart (). name ("chart") . title ("Gross domestic product growth /GDP annual %/") . legend (legend => legend . position (ChartLegendPosition.Top)). chartArea (chartArea => chartArea . background ("transparent")). series (series => {series。Column(new double[] {3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855}).Name("India");系列。列(new double[]{4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247， -7.832, 4.3, 4.3})。名称(“俄罗斯联邦”);系列。列(new double[] {0.010， -0.375, 1.161, 0.684, 3.7, 3.269, 1.083， -5.127, 3.690, 2.995}).Name("Germany");系列。Column(new 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 #")))

@addTagHelper *，剑道。       < value-axis>             

轴标题

您还可以添加标题，以清楚地指示轴的角色。

@(Html.Kendo(). chart (). name ("chart") . title("平均温度和湿度"). legend (legend => legend . position (ChartLegendPosition.Bottom)). series (series => {series。Column(new double[] {20,25,32}).Name("Temperature").Axis(" Temperature");系列。Column(new double[] {45,50,80}).Name("湿度").Axis("湿度");}) . categoryaxis (axis => axis . categories ("Aug"， "Sep"， "Oct") . axiscrossingvalue (0,3)) . valueaxis (axis => axis . numeric () . name ("temperature") . title (t=>t。Text("Temperature, Celsius"))) . valueaxis (axis => axis . numeric () . name("湿度"). title (t=>t。文本(“相对湿度”))))

@addTagHelper *，剑道。Mvc @{var categories =新字符串[]{“八月”，“九月”，“十月”};}          < / 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。Bottom">    

情节乐队

图表使您能够配置每个轴，以显示预定义值范围的不同颜色的带。类别索引(从零开始)用作类别轴的值。

.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").Opacity(0.3);bands.Add() .从(30000),(30500).Color(“# c00”).Opacity (0.8);}))

全局设置

您可能还需要应用影响所有轴的全局设置。在这种情况下，使用AxisDefaults。

. axisdefaults (a=> a) . labels (l=>l。字体("16px Verdana")))

< font="16px Verdana">  

功能和特性

• 数据绑定
• 外观

事件

你可以订阅所有的图表事件。有关基本图表事件的完整示例，请参阅演示如何使用图表中的事件。

按处理程序名称处理

以下示例演示如何通过处理程序名称订阅事件。

@(Html.Kendo().Chart() .Name("chart") .Events(events => events .SeriesClick("onSeriesClick") .DataBound("onDataBound"))))

@addTagHelper *，剑道。Mvc  

模板委托处理

@(Html.Kendo().Chart() .Name("chart") .Events(events => events .SeriesClick(@ function(){//处理seriesClick事件}) .DataBound(@ function(){//处理dataBound事件})))

引用现有实例

要引用现有的Chart实例，请使用jQuery.data ()配置选项。一旦建立了引用，就使用图表客户端API控制它的行为。

//将以下内容放置在ASP的图表后面。. NET核心声明。