图形未显示在MVC Core中

如何解决图形未显示在MVC Core中

您好可爱的聪明人，我希望您可以通过我正在做的Graph项目帮助我。我在MVC Core项目中找到了一些漂亮的代码来创建图形here，我正在使用的片段是“数据库中的数据”，在调试时，我可以在视图中看到已成功输入数据库中的值进入ViewBag.DataPoints，但未显示图形。 我在Visual Studio 2019中使用.NET Core 3.1。 我将非常感谢您能提供的任何帮助。 谢谢你一百万。

型号：

public class Point
    {
        [Key]
        public int x { get; set; }
        public Nullable<int> y { get; set; }
    }

上下文：

public class DataPointsDB : DbContext
    {
        public DataPointsDB(DbContextOptions<DataPointsDB> options)
            : base(options)
        {
        }
    
        public virtual DbSet<Point> Points { get; set; }
    }

控制器：

public class PointsController : Controller
    {
        private readonly DataPointsDB _db;

        public PointsController(DataPointsDB db)
        {
            _db = db;
        }
        public IActionResult Index()
        {
            IEnumerable<Point> objList = _db.Points;
            return View(objList);
        }

        public IActionResult Create()
        {
            ViewData["x"] = new SelectList(_db.Points,"x","y");
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("x,y")] Point point)
        {
            if (ModelState.IsValid)
            {
                _db.Add(point);
                await _db.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            ViewData["x"] = new SelectList(_db.Points,"y",point.x);
            return View(point);
        }

        // GET: HowTo
        public ActionResult DataFromDataBase()
        {
            try
            {
                ViewBag.DataPoints = JsonConvert.SerializeObject(_db.Points.ToList(),_jsonSetting);

                return View();
            }
            catch (EntityException)
            {
                return View("Error");
            }
            catch (System.Data.sqlClient.sqlException)
            {
                return View("Error");
            }
        }

        JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };


    }

查看：

@model IEnumerable<Test_Chart.Models.Point>


<div id="chartContainer"></div>

<script type="text/javascript">
    var result = @Html.Raw(ViewBag.DataPoints);
    var dataPoints =[];
    for(var i = 0; i < result.length; i++){
        dataPoints.push({label:result[i].x,y:result[i].y});
    }

    $(function () {
        var chart = new CanvasJS.Chart("chartContainer",{
            theme: "light2",zoomEnabled: true,animationEnabled: true,title: {
                text: "Line Chart with Data-Points from DataBase"
            },data: [
            {
                type: "line",dataPoints: dataPoints,}
            ]
        });
        chart.render();
    });
</script>

，我已经添加了 {Layout中的<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

再次感谢x

解决方法

供您参考。...

//this is not needed as we not doing anything,if you want the chart to 
//happen when the page is loaded then add "renderChart();" inside
//otherwise delete and add onclick to some element with "renderChart();"
$(function () {
   
   //this is short hand for saying when the doc is finished loading... run this.
   
});

//out side of function so its global,//example: not what I'm suggesting...
// trying to show you the importance of do something when 
// we have the data... 
var dataPoints =[];
function renderChart1() {

   
    var chart = new CanvasJS.Chart("chartContainer",{
        theme: "light2",zoomEnabled: true,animationEnabled: true,title: {
            text: "Line Chart with Data-Points from DataBase"
        },data: [
        {
            type: "line",dataPoints: dataPoints,}
        ]
    });
    chart.render();

}

//now you can not call renderChart1() as there are no dataPoints so lets fetch them 
//https://www.w3schools.com/jquery/jquery_ref_ajax.asp

$.get("http://localhost:64160/DataFromDataBase",function(data){
    
    //when we have the data set it. this is why we made it global
    //a little confusing but was trying to show smaller steps
   // to get the version below altho i think i my have just made it more confusing
    dataPoints = data;
    renderChart1();
    
});


//better version is.... its much easier to understand 
//-----------------------------------------------

function renderChart() {
   
   $.get("http://localhost:64160/DataFromDataBase",function(data){
    
        //data could be a more complex object instead of just the dataPoints

        var chart = new CanvasJS.Chart("chartContainer",{
            theme: "light2",title: {
                text: "Line Chart with Data-Points from DataBase"
            },data: [{
                type: "line",dataPoints: data,}]
        });
        chart.render();
    
    });
   
}
//-----------------------------------------------