数据绑定
您可以为ASP填充Telerik UI Chart。NET核心与数据通过将其绑定到内联数据，将其绑定到本地数据,或将其绑定到远程数据．
内联数据
可以将图表的数据点指定为系列定义的一部分。数据点的类型取决于序列的类型。
将类别序列绑定到内联数据
分类系列，如“条”、“线”或“面积”，则需要数值类型的数据点。类别名称在类别轴中独立地填充。
为了保持图表的一致性，所有系列都必须包含相同数量的点，其顺序与中声明的类别的顺序相匹配
CategoryAxis．
@(Html.Kendo(). chart (). name ("chart") . series (series => {series. series.)Line(new double[] {3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855}).Name("India");系列。Line(new double[] {1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333， -2.245, 4.339, 2.727}).Name("World");系列。线(新双[]{4.743,7.295,7.175,6.376,8.153,8.535,5.247,-7.832,4.3,4.3})。名称(“俄罗斯联邦”);系列。线(新双[]{-0.253,0.362,-3.519,1.799,2.252,3.343,0.843,2.877,-5.416,5.590}). name(“海地”);}) . categoryaxis (axis => axis . categories ("2002"， "2003"， "2004"， "2005"， "2006"， "2007"， "2008"， "2009"， "2010"， "2011") . majorgridlines (lines => lines. visible (false)) . valueaxis (axis => axis . numeric()。标签(Labels => Labels . format ("{0}%")) .Line(line => line. visible (false)) .AxisCrossingValue(-10)))) 将散射序列绑定到内联数据
散射系列包括二维的Scatter和ScatterLine系列。系列中的每个数据点都必须是一个包含X和Y值的数组。
@(Html.Kendo(). chart (). name ("chart") . title ("Rainfall - Wind Speed") . legend (legend => legend . position (ChartLegendPosition.Bottom)). seriesDefaults (seriesDefaults => seriesDefaults . scatter()。标签(Labels =>标签. visible (false))) . series (series =>{系列。散射(新双[][]{新的[]{16.4,5.4},[]{21.7,2},新的[]{25.4,3},新的[]{19.0,2.0},新的[]{10.9,1}}). name(2008年1月);系列。散射(新双[][]{新的[]{6.4,13.4},[]{1.7,11},新的[]{5.4,8},新的[]{9.0,17.0},新的[]{1.9,4}}). name(2009年1月);系列。散射(新双[][]{新的[]{21.7,3},[]{13.6,3.5},新的[]{13.6,3},新的[]{29.9,3},新的[]{21.7,20}}). name(2010年1月);}) . xaxis (x => x . numeric () . title (title => title。Text("风速[km/h]")) . max (35)) . yaxis (y => y . numeric () . title (title =>标题。Text("降雨量[mm]")) .AxisCrossingValue(-5) .Min(-5) .Max(25))))@ {var data2008 = new双[][]{新的[]{16.4,5.4},[]{21.7,2},新的[]{25.4,3},新的[]{19.0,2.0},新的[]{10.9,1}};var data2009 = new双[][]{新的[]{6.4,13.4},[]{1.7,11},新的[]{5.4,8},新的[]{9.0,17.0},新的[]{1.9,4}};var data2010 = new双[][]{新的[]{21.7,3},[]{13.6,3.5},新的[]{13.6,3},新的[]{29.9,3},新的[]{21.7,20}};} 绑定到对象数组
更灵活的替代方法是为该系列提供对象数组。这使您能够将每个值映射到相应的序列字段，这对于在单个数据点中同时具有数字和字符串字段的系列非常有用，例如Pie、Donut、Bubble等。
@ (Html.Kendo () .Chart () . name(“图表”).Legend(传说= >传奇.Visible(假)).Series(系列= >{系列。甜甜圈(新动态[]{新类别= "亚洲"，value = 53.8,color = "#9de219"}，新类别= "欧洲"，value = 16.1,color = "#90cc38"}，新类别= "拉丁美洲"，value = 11.3,color = "#068c35"}，新类别= "非洲"，value = 9.6,color = "#006634"}，新类别= "中东"，value = 5.2,color = "#004d38"}，new {category = "North America"，value = 3.6,color = "#033939"}}) .Name("2012") .Labels(labels => labels .Visible(true) .Position(chartserieslabellocation . outsideend) .Template("#= category #: \ n# = value#%") .Background("transparent"));}) .Tooltip(tooltip => tooltip .Visible(true) .Template("#= category # (#= series.name #): #= value #%"))) 本地数据
可以将图表绑定到视图模型中的数据集或存储在视图模型中的项ViewBag/显示数据．
{var internetUsers =新的internetUsers[]{新的internetUsers(2000,43.1，“美国”)，新的internetUsers(2001,49.2，“美国”)，新的internetUsers(2002,59.0，“美国”)，新的internetUsers(2003,61.9，“美国”)，新的internetUsers(2004,65，“美国”)，新的internetUsers(2005,68.3，“美国”)，新的internetUsers(2006,69.2，“美国”)，新的internetUsers(2007,75.3，“美国”)，新的internetUsers(2008,74.2，“美国”)，新互联网用户(2009,71.2，“美国”)，新互联网用户(2010,74.2，“美国”)，新互联网用户(2011,78.2，“美国”)};返回视图(internetUsers);｝public class InternetUsers {public InternetUsers() {} public InternetUsers(int year, double value, string country) {year = year;价值=价值;Country =国家;} public int年{获取;设置;} public double值{get;设置;}公共字符串国家{获取;设置;}}@ model IEnumerable < LocalBindingExample.Models。InternetUsers > @ (Html.Kendo () .Chart(模型). name(“图表”).Title(“美国互联网用户”).Legend(传说= > legend.Visible(假)).Series(系列= >{系列。Line(model => model. value) .Name("United States").CategoryField("Year") .Labels(labels => labels. format ("{0}%").Visible(true));}) .CategoryAxis(axis => axis .MajorGridLines(lines => lines. visible (false))) .ValueAxis(axis => axis. numeric () .Labels(labels => labels. format ("{0}%")) .Line(lines => lines. visible (false)))) .@ model IEnumerable < LocalBindingExample.Models。InternetUsers> < labels format="{0}%" visible="true"> 远程数据
最灵活的数据绑定形式是使用DataSource组件。通过使用Ajax请求，可以轻松地配置组件从控制器方法或远程API端点请求数据。
使用DataSource组件绑定到远程数据:
在控制器中添加一个返回数据集的新动作方法。
[HttpPost] public IActionResult _SpainElectricityProduction(){//数据通常从与DbContext实例通信的服务中读取。//关于连接数据库和使用DBContext的详细信息，请参阅MSDN文档:// https://docs.microsoft.com/en-us/dotnet/api/microsoft.entityframeworkcore.dbcontext?view=efcore-5.0 // //为了清晰起见，在本例中，静态数据将从远程端点生成并返回。var =新ElectricityProduction[]{新ElectricityProduction(“2000”,18岁,31807、4727、62206),新ElectricityProduction(" 2001 ", 24岁,43864、6759、63708),新ElectricityProduction(“2002”,30岁,26270、9342、63016),新ElectricityProduction(“2003”,41岁,43897、12075、61875),新ElectricityProduction(56岁的“2004”34439、15700、63606),新ElectricityProduction(“2005”,41岁,23025、21176、57539),新ElectricityProduction(“2006”,119,29831,23297,60126),新ElectricityProduction(508年“2007”,30522, 27568, 55103)，新的电力生产(“2008”，2578,26112,32203,58973)};返回Json(结果);｝公共类ElectricityProduction {public ElectricityProduction() {} public ElectricityProduction(string year, int solar, int hydro, int wind, int nuclear) {year = year;太阳能=太阳能;水力的;风=风;核=核;} public string年份{获取;设置;}公共int太阳能{获取;设置;}公共int核{得到; set; } public int Hydro { get; set; } public int Wind { get; set; } }在视图中，配置Chart以使用您创建的操作方法。
@(Html.Kendo(). chart() . name ("chart") . title("西班牙电力生产(GWh)") . legend (legend => legend . position (ChartLegendPosition.Top)). datasource (ds => ds. top). name("图表"). title("西班牙电力生产(GWh)") . legend(传说=>传说。读(Read =>读。Action("_SpainElectricityProduction"， "Line_Charts"))) . series (series => {series. properties)。Line(model => model.Nuclear).Name("Nuclear").CategoryField("Year");系列。Line(model => model.Hydro).Name("Hydro").CategoryField("Year");系列。Line(model => model.Wind).Name("Wind").CategoryField("Year");}) .CategoryAxis(axis => axis .Labels(labels => labels. rotation (-90)) . crosshairir (c => c.Visible(true)) .ValueAxis(axis => axis. numeric () .Labels(labels => labels.Format("{0:N0}") .MajorUnit(10000)) .Tooltip(tooltip => tooltip .Visible(true) .Shared(true) .Format("{0:N0}"))) .ValueAxis(axis => axis. numeric (true)) .ValueAxis(axis => axis. numeric (true)) .Tooltip(tooltip => tooltip .Visible(true) .Shared(true) .Format("{0:N0}"))) (可选)配置自定义数据源。
与Grid不同，在默认情况下，Chart被配置为读取平面数据响应。属性的自定义逻辑
ToDataSourceResult ()方法在返回图表的数据时，配置一个自定义数据源，使用一个能够正确解析响应的模式。有关DataSource配置的更多详细信息，请参阅DataSource部分．public IActionResult Products_Read([DataSourceRequest] DataSourceRequest request){返回Json(productService.Read().ToDataSourceResult(request));｝@(Html.Kendo(). chart < kendo . mvc . samples . models . productviewmodel >() . name ("chart") . title ("Product Prices") . legend (legend => legend . position (ChartLegendPosition.Top)). datasource (source => {source. custom (). type ("aspnetmvc-ajax") . transport (transport => {transport. properties))。读(“Products_Read”、“图表”);. schema(模式= > {})schema.Data .Total(“数据”)(“总”);});}) . series (series => {series. series. 0)Column(model => model. unitprice).Name("Price").CategoryField("ProductName");}))