将 syncfusion 图表与 ASP.NET MVC 集成

Question

我正在为我的应用程序使用 syncfusion 来显示图表，并且我已经使用 this 文档来创建演示页面。

页面没有任何错误，但页面上没有显示图表。

正如我所做的那样，有一个代码可用但未显示在页面上。

我附上了屏幕截图，请查看。

代码：

控制器端：

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            //// Create dataSource to chart
            List<ChartData> data = new List<ChartData>();
            data.Add(new ChartData("Jan", 35));
            data.Add(new ChartData("Feb", 28));
            data.Add(new ChartData("Mar", 34));
            data.Add(new ChartData("Apr", 32));
            data.Add(new ChartData("May", 40));
            data.Add(new ChartData("Jun", 32));
            data.Add(new ChartData("Jul", 35));
            data.Add(new ChartData("Aug", 55));
            data.Add(new ChartData("Sep", 38));
            data.Add(new ChartData("Oct", 30));
            data.Add(new ChartData("Nov", 25));
            data.Add(new ChartData("Dec", 32));
            ///...
            ViewBag.ChartData = data;
            return View();
        }
     }          

    public class ChartData {
        public string Month;
        public double Sales;
        public ChartData(string month, double sales)
        {
            this.Month = month;
            this.Sales = sales;
        }
    }

CSHTML:

@using Syncfusion.JavaScript.DataVisualization

<!--  jquery script  -->
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>    

    <!-- Essential JS UI widget -->
    <script src="http://cdn.syncfusion.com/13.1.0.21/js/web/ej.web.all.min.js"></script>

    <!--Add Syncfusion Script Manager -->
    @Html.EJ().ScriptManager()

 <div>

               @(Html.EJ().Chart("chartContainer")
                    .Series(sr =>
                         { 
                            //Change series type
                            sr.Type(SeriesType.Line).Add();                  
                         })
               )
          </div>

Answer 1

我们已使用随附的屏幕截图分析了查询。我们怀疑，您已经将 UnobtrusiveJavaScriptEnabled 设置为 true，但没有引用 ej.unobtrusive.min.js 文件。所以我们建议参考ej.unobtrusive.min.js文件。请找到下面的代码片段。

<script src="~/Scripts/ej/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/ej/ej.web.all.min.js"></script>
<script src="~/Scripts/ej/ej.unobtrusive.min.js"></script>

为了参考，我们附上了样本。请找到 Sample Link

Unobtrusive JavaScript 支持将创建具有基本级别 HTML 标签结构的组件，以减少页面的权重。更多关于Unobtrusive的资讯，请关注下方link

Help document

谢谢，陀罗尼.

将 syncfusion 图表与 ASP.NET MVC 集成

Integrate syncfusion chart with ASP.NET MVC

asp.net

asp.net-mvc

charts

syncfusion

bar-chart