图表未显示在 MVC Core 中
Graph not displaying in MVC Core
你好可爱的聪明人,我希望你能帮助我完成我正在做的一个 Graph 项目。我发现了一些用于创建图形的漂亮代码 here 我正在使用的部分是“来自数据库的数据”,在 MVC Core 项目中,调试时我可以在视图中看到数据库中的值已成功输入进入 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, "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 };
}
查看:
@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>
而且我已经添加了
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
在 _Layout
再次感谢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();
});
}
//-----------------------------------------------
你好可爱的聪明人,我希望你能帮助我完成我正在做的一个 Graph 项目。我发现了一些用于创建图形的漂亮代码 here 我正在使用的部分是“来自数据库的数据”,在 MVC Core 项目中,调试时我可以在视图中看到数据库中的值已成功输入进入 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, "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 };
}
查看:
@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>
而且我已经添加了
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
在 _Layout
再次感谢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();
});
}
//-----------------------------------------------