Question

I am currently trying to evaluate the Kendo UI asp.net mvc 6 ("asp.net core") widgets. I downloaded the example project Kendo.Mvc.Examples project, which can be found here: http://docs.telerik.com/kendo-ui/aspnet-mvc/aspnetmvc-apps/mvc-6/introduction

The example project works just fine. Now I am trying to create my own skeleton project as follows:

Created a new Visual Studio project using ASP.NET 5 Web Application template
Added "Kendo.Mvc": "2016.1.301"dependency in my project json.
Added services.AddKendo(); in Startup.ConfigureServices()
Modified my Index.chtml to include Kendo UI controls:

@using Kendo.Mvc.UI

@{ ViewData["Title"] = "My Things Dashboard"; }

@ViewData["Title"]

Currently Running Things

@(Html.Kendo().Button() .Name("iconTextButton") .HtmlAttributes(new { type = "button" }) .Icon("ungroup") .Content("Kendo UI Button"))

@(Html.Kendo().Chart() .Name("chart") .Title("Gross domestic product growth \n /GDP annual %/") .Legend(legend => legend .Position(ChartLegendPosition.Bottom) ) .ChartArea(chartArea => chartArea .Background("transparent") ) .SeriesDefaults(seriesDefaults => seriesDefaults.Area().Line(line => line.Style(ChartLineStyle.Smooth)) ) .Series(series => { 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("India"); }) .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 => labels.Format("{0}%")) .AxisCrossingValue(-10) .Line(line => line.Visible(false)) ) .Tooltip(tooltip => tooltip .Visible(true) .Format("{0}%") .Template("#= series.name #: #= value #") ) )

When I run the app, the button is displayed correctly but the chart does not appear. However, viewing the html source I can see that the chart is being generated:

Currently Running Things

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>

Not sure what I am doing wrong....thanks for any help!

Answer 1

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

，确定已解决问题

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

Chart component not displayed using Kendo UI Asp.net mvc core

@ViewData["Title"]

1 个答案: