2013-04-12 60 views
0

我是新的劍道圖,我想在我的MVC項目中實現它。我正在使用劍道版本2012.3.1315.340劍道圖基本綁定

控制器:

public ActionResult KendoChart() 
{ 
    return View(); 
} 

public ActionResult GetTaskAllz() 
{ 
    dbipathEntities1 objContext = new dbipathEntities1(); 
    List<mdlChart> objLst = new List<mdlChart>(); 
    List<tblPurchaseOrder> objLst1 = new List<tblPurchaseOrder>(); 
    var objMdl1 = (from c in objContext.tblPurchaseOrders select c).Take(100).OrderBy(x => x.POID).ToList(); 
    objLst1 = objMdl1.ToList<tblPurchaseOrder>(); 
    for (int i = 0; i < objLst1.Count; i++) 
    { 
    objLst.Add(new mdlChart { JobNo = objLst1[i].JobID, SupplierID = objLst1[i].SupplierID }); 
    } 
    return Json(objLst1, JsonRequestBehavior.AllowGet); 
} 

型號:

public class mdlChart 
{ 
    public Nullable<int> JobNo { get; set; } 
    public Nullable<int> SupplierID { get; set; } 
} 

CSHTML:

<link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.common.min.css")" /> 

<link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.rtl.min.css")" /> 
<link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.default.min.css")" /> 
<link rel="stylesheet" href="@Url.Content("~/Kendo/examples-offline.css")" /> 
<script src="../../Kendo/Jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="@Url.Content("~/Kendo/kendo.web.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Kendo/kendo.aspnetmvc.min.js")" type="text/javascript"> </script> 
<script src="@Url.Content("~/Kendo/console.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Kendo/prettify.min.js")" type="text/javascript"></script> 
<script src="../../Kendo/kendo.culture.en-GB.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//set current to the "en-GB" culture script 
kendo.culture("en-GB"); 
</script> 
@using Kendo.Mvc.UI 
@(Html.Kendo().Chart<MVCProject.Models.mdlChart>() 
.Name("chart") 
.Title("Pop In Accounts") 
.Legend(legend => legend 
.Position(ChartLegendPosition.Top) 
) 
.DataSource(ds => ds.Read(read => read.Action("GetTaskAllz", "Kendo"))) 
.Series(series => 
{ 
    series.Column(model => model.JobNo).Name("Val2"); 
}) 
.CategoryAxis(axis => axis 
    .Categories(model => model.SupplierID) 
    .Labels(labels => labels.Rotation(-90)) 
) 
) 

但是這個我不是GE tting Chart。這是給JavaScript錯誤:

Microsoft JScript runtime error: Object doesn't support this property or method 

的JavaScript自動生成的代碼在上面的錯誤來了:

jQuery(
function() { 
    debugger; 
    jQuery("#chart").kendoChart(
     { "title": { "text": "Pop In Accounts" }, 
     "legend": { "position": "top" }, 
     "series": [{ "name": "Val2", "type": "column", "field": "JobNo"}], 
     "categoryAxis": [{ "labels": { "rotation": -90 }, "field": "SupplierID"}], 
     "dataSource": { "transport": { "prefix": "", "read": { "url": "/Kendo/GetTaskAllz", "type": "POST"} }, 
     "type": "aspnetmvc-ajax", 
     "schema": 
     { "model": 
     { "fields": 
     { "JobNo": 
     { "type": "number", "defaultValue": null }, 
     "SupplierID": { "type": "number", "defaultValue": null } 
     } 
     } 
    } 
    } 
}); 
}); 
+0

感謝您編輯我的代碼,但您能否爲我提供一些解決方案。 – Ravi

回答

2

你應該包括 「kendo.all.min.js」。 「kendo.web.min.js」不包括Kendo UI DataViz小部件。更多信息可以在documentation找到。

+0

It Works !!謝謝很多人!!!!! – Ravi

+0

非常感謝! – ravisolanki07

0

解決!只需用下面的腳本替換所有上面的腳本。

 <script src="../../Kendo/Jquery-1.8.3.min.js" type="text/javascript"></script> 
    <link href="../../Kendo/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /> 
    <script src="../../Kendo/kendo.dataviz.min.js" type="text/javascript"></script>