使用ASP MVC中的CanvasJS将JSON数据获取到图表 [英] Get JSON data to a chart using CanvasJS in ASP MVC

问题描述

我正在尝试在mvc中使用CanvasJS在网页中显示图表。我可以在网页中看到JSON数据，但它不会显示在图表中。我的控制器和脚本代码如下所示：请帮助：

 命名空间 ContsoSite.Controllers 
 {
  public   class  DashboardController：Controller 
 {
  //    
  / /   GET：/ Dashboard /  
  public  ActionResult Index（）
 {
  return  View（）; 
} 
  public  JsonResult GetData（）
 {
  using （ var  db =  new  ContosoUniversityEntities（））
 {
  var  result =（ from  tags  in  db.Courses 
  orderby  tags.Title 升序 
 选择  new  {tags.Title，tags.Credits}。。ToList（）; 
  return  Json（JsonConvert.SerializeObject（result），JsonRequestBehavior.AllowGet）; 
  //  返回内容（JsonConvert.SerializeObject（_dataPoints），application / json）;  
} 
} 
 
  public  ActionResult Dashboard_Pie（）
 {
 返回 View（）; 
} 
 
  public  ActionResult Dashboard_AreaChart（）
 {
  return 查看（）; 
} 
 
 
  public  ActionResult Dashboard_ColumnChart（）
 {
  return  View（）; 
} 
} 
} 

我的脚本如下：

 @ model IEnumerable <   ContsoSite。 Models.ContosoUniversityEntities  >  
 @ {
 ViewBag.Title =Index; 
} 
 
 <   h2  > 索引<   / h2  >  
 
 <   script     src   = 〜/ Scripts / canvasjs.min.js >  <  < span class =code-leadattribute> / script  >  
 @ * <   script     src   = 〜/ Scripts / canvasjs.js >  <   / script  >  * @ 
 @ * <   script     src   = 〜/ Scripts / excanvas.js < span class =code-keyword>>  <   / script  >  * @ 
 
 <   script     type   = < span class =code-keyword> text / javascript >  
 $（document）.ready（function（）{
 
 $ .getJSON（/ Dashboard / GetData /，function（data）{
 var chart = new CanvasJS.Chart（chartCo ntainer，{
主题：theme2，// theme1 
标题：{
 text：使用AJAX& amp;的ASP.Net MVC中的CanvasJS图表JSON
}，
数据：[
 {
 //将类型更改为bar，splineArea，area，spline，pie等。
类型：column，
 dataPoints：data 
} 
] 
}）; 
 
 chart.render（）; 
}）; 
 
}）; 
 <   / script  >  
 
 <   body  >  
 <   div     id   =   chartContainer    style  < SP class =code-keyword> =  height：300px;宽度：100％; >  <   / div  >  
 
 
 <   / body  >  

解决方案

（document）.ready（function（）{

.getJSON（/ Dashboard / GetData /，function（data）{
var chart = new CanvasJS.Chart（chartContainer，{
theme：theme2，// theme1
title：{
text：CanvasJS Charts in ASP.Net MVC using AJAX& JSON
}，
数据：[
{
//将类型更改为bar，splineArea，area，spline，pie等。
类型：column，
dataPoints：data
}
]
}）;

chart.render（）;
}）;

}）;
< / script >

< body >
< div id = chartContainer style = height：300px; width：100％; > < / div >


< / body >

i am trying to display a chart in a web page using CanvasJS in mvc. i can see the JSON data in a web page but it does not display in a chart. my Controller and script code looks like this: please help:

namespace ContsoSite.Controllers
{
    public class DashboardController : Controller
    {
        //
        // GET: /Dashboard/
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetData()
        {
            using (var db = new ContosoUniversityEntities ())
            {
                var result = (from tags in db.Courses
                              orderby tags.Title ascending
                              select new { tags.Title, tags.Credits }).ToList();
                return Json(JsonConvert.SerializeObject(result), JsonRequestBehavior.AllowGet);
                //return Content(JsonConvert.SerializeObject(_dataPoints), "application/json");
            }
        }

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

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


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

and my script looks like this:

@model IEnumerable<ContsoSite.Models.ContosoUniversityEntities>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/canvasjs.min.js"></script>
@*<script src="~/Scripts/canvasjs.js"></script>*@
@*<script src="~/Scripts/excanvas.js"></script>*@

<script type="text/javascript">
    $(document).ready(function () {

        $.getJSON("/Dashboard/GetData/", function (data) {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",//theme1
                title: {
                    text: "CanvasJS Charts in ASP.Net MVC using AJAX & JSON"
                },
                data: [
                {
                    // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                    type: "column",
                    dataPoints: data
                }
                ]
            });

            chart.render();
        });

    });
</script>

    <body>
        <div id="chartContainer" style="height: 300px; width: 100%;"></div>


    </body>

解决方案

(document).ready(function () {

.getJSON("/Dashboard/GetData/", function (data) { var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2",//theme1 title: { text: "CanvasJS Charts in ASP.Net MVC using AJAX & JSON" }, data: [ { // Change type to "bar", "splineArea", "area", "spline", "pie",etc. type: "column", dataPoints: data } ] }); chart.render(); }); }); </script> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> </body>

这篇关于使用ASP MVC中的CanvasJS将JSON数据获取到图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！