C# MVC核心中未显示图形

你好，可爱聪明的人们，我希望你们能帮我完成我正在做的一个图形项目。我发现了一些创建图形的漂亮代码我使用的是MVC核心项目中的“数据库中的数据”，调试时，我可以在视图中看到数据库中的值正在成功地输入到ViewBag.DataPoints中，但图形没有显示。 我正在Visual Studio 2019中使用.NET Core 3.1。 如果你们能提供任何帮助，我将不胜感激。 非常感谢

型号：

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

公共类点
{
[关键]
公共整数x{get；set；}
公共可空y{get；set；}
}

背景：

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

公共类数据点db:DbContext
{
公共数据点SDB（DbContextOptions选项）
：基本（选项）
{
}
公共虚拟数据库集点{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, "x", "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 };


    }

公共类点控制器：控制器
{
专用只读数据点SDB_db；
公共点控制器（DataPointsDB）
{
_db=db；
}
公共IActionResult索引（）
{
IEnumerable对象列表=_db.Points；
返回视图（对象列表）；
}
public IActionResult Create（）
{
ViewData[“x”]=新的选择列表（_db.Points，“x”，“y”）；
返回视图（）；
}
[HttpPost]
[ValidateAntiForgeryToken]
公共异步任务创建（[Bind（“x，y”）]Point）
{
if（ModelState.IsValid）
{
_db.Add（点）；
等待_db.SaveChangesAsync（）；
返回重定向到操作（名称（索引））；
}
ViewData[“x”]=新的选择列表（_db.Points，“x”，“y”，point.x）；
返回视图（点）；
}
//获得：如何
public ActionResult DataFromDataBase（）
{
尝试
{
ViewBag.DataPoints=JsonConvert.SerializeObject（_db.Points.ToList（），_jsonSetting）；
返回视图（）；
}
捕获（EntityException）
{
返回视图（“错误”）；
}
catch（System.Data.SqlClient.SqlException）
{
返回视图（“错误”）；
}
}
JsonSerializerSettings_jsonSetting=new JsonSerializerSettings（）{NullValueHandling=NullValueHandling.Ignore}；
}

视图：

@model IEnumerable
var result=@Html.Raw（ViewBag.DataPoints）；
var数据点=[]；
对于（变量i=0；i

我补充说 布局中的

---

再次感谢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",
            zoomEnabled: true,
            animationEnabled: true,
            title: {
                text: "Line Chart with Data-Points from DataBase"
            },
            data: [{
                type: "line",
                dataPoints: data,
            }]
        });
        chart.render();
    
    });
   
}
//-----------------------------------------------

---

你知道js中的关键词“debugger”对吗？如果没有，请在

$（函数（）{

检查您的数据是否正确。打开浏览器并让调试器打开f12，包括js错误并添加viewSeabizkit的html，非常感谢您回复我。我不知道，谢谢！您完全正确，这就是问题所在，当我f12时，它告诉我“未捕获的引用错误：$未定义”。我还为脚本“加载资源失败”-modernizr 2.6.2.js和font-awesome.min.css。你对我如何解决这些问题有什么建议吗？伙计！我成功了，非常感谢！！！我把我的函数放在这个小东西里面，它成功了！太棒了！再次感谢！

@section scripts{$（函数（）{alert（“Test”）；}}

//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",
            zoomEnabled: true,
            animationEnabled: true,
            title: {
                text: "Line Chart with Data-Points from DataBase"
            },
            data: [{
                type: "line",
                dataPoints: data,
            }]
        });
        chart.render();
    
    });
   
}
//-----------------------------------------------