使用 Kendo UI Asp.net mvc core 未显示图表组件

Posted 2023-05-09

【中文标题】使用 Kendo UI Asp.net mvc core 未显示图表组件

【英文标题】：Chart component not displayed using Kendo UI Asp.net mvc core

【发布时间】：2016-08-07 15:31:36

【问题描述】：

我目前正在尝试评估 Kendo UI asp.net mvc 6（“asp.net core”）小部件。我下载了示例项目 Kendo.Mvc.Examples 项目，可以在这里找到：http://docs.telerik.com/kendo-ui/aspnet-mvc/aspnetmvc-apps/mvc-6/introduction

示例项目运行良好。现在我正在尝试创建自己的骨架项目，如下所示：

使用 ASP.NET 5 Web 应用程序模板创建了一个新的 Visual Studio 项目 在我的项目 json 中添加了 "Kendo.Mvc": "2016.1.301"dependency。 在Startup.ConfigureServices() 中添加了services.AddKendo();

修改了我的 Index.chtml 以包含 Kendo UI 控件：

@using Kendo.Mvc.UI

@ ViewData["Title"] = "我的事情仪表板";

@ViewData[“标题”]

当前运行的东西

@(Html.Kendo().Button() .Name("iconTextButton") .HtmlAttributes(new type = "button" ) .icon("取消组合") .Content("Kendo UI 按钮"))

@(Html.Kendo().Chart() .Name("图表") .Title("国内生产总值增长\n /GDP年%/") .传奇（传奇=>传奇 .Position(ChartLegendPosition.Bottom) ) .ChartArea(chartArea => chartArea .Background("透明") ) .SeriesDefaults(seriesDefaults => seriesDefaults.Area().Line(line => line.Style(ChartLineStyle.Smooth)) ) .系列（系列=> series.Area(new double[] 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 ).Name("印度"); ) .CategoryAxis(轴 => 轴 .类别（“2002”、“2003”、“2004”、“2005”、“2006”、“2007”、“2008”、“2009”、“2010”、“2011”） .MajorGridLines(lines => lines.Visible(false)) ) .ValueAxis（轴=>轴 。数字（） .Labels(labels => labels.Format("0%")) .AxisCrossingValue(-10) .Line(line => line.Visible(false)) ) .Tooltip（工具提示 => 工具提示 .可见（真） .Format("0%") .Template("#= series.name #: #= value #") ) )

当我运行应用程序时，按钮显示正确，但图表没有出现。但是，查看 html 源代码可以看到正在生成图表：

当前运行的东西

Kendo UI ButtonjQuery(function()jQuery("#iconTextButton").kendoButton("icon":"ungroup"););

<div id="chart" name="chart"></div><script>jQuery(function()jQuery("#chart").kendoChart("categoryAxis":["categories":["2002","2003","2004","2005","2006","2007","2008","2009","2010","2011"],"majorGridLines":"visible":false],"chartArea":"background":"transparent","legend":"position":"bottom","series":["name":"India","type":"area","data":[3.907,7.943,7.848,9.284,9.263,9.801,3.89,8.238,9.552,6.855],"name":"World","type":"area","data":[1.988,2.733,3.994,3.464,4.001,3.939,1.333,-2.245,4.339,2.727],"name":"Haiti","type":"area","data":[-0.253,0.362,-3.519,1.799,2.252,3.343,0.843,2.877,-5.416,5.59]],"title":"text":"Gross domestic product growth \n /GDP annual %/","tooltip":"format":"0%","template":"#= series.name #: #= value #","visible":true,"valueAxis":["axisCrossingValue":[-10],"labels":"format":"0%","line":"visible":false,"type":"numeric"],"seriesDefaults":"area":"line":"style":"smooth"););</script>

不知道我做错了什么....感谢您的帮助！

【参考方案1】：

由于以下 Telerik 故障排除链接，OK 解决了问题：http://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#kendo-ui-widgets-are-unavailable-or-undefined

jquery 在页面中的 kendo ui 脚本之后被引用。确保在 kendo ui 之前包含 jquery