c# - 图表未在 MVC Core 中显示
问题描述
你好可爱的聪明人,我希望你能帮助我完成我正在做的 Graph 项目。我在这里找到了一些用于创建图表的漂亮代码我正在使用的部分是 MVC Core 项目中的“来自数据库的数据”,在调试时我可以在视图中看到数据库中的值已成功输入到 ViewBag 中。数据点,但未显示图表。我在 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();
});
}
//-----------------------------------------------
推荐阅读
- python - 如何在 selenium 中修复此错误:AttributeError: 'list' object has no attribute 'find_elements_by_css_selector'
- php - Yii2 之前的请求导致无限递归
- python - Pandas:将多列添加到多索引列数据框中
- php - 登录 Laravel 5.8
- java - 如何动态循环遍历数组列表并添加每个第 n 个元素
- javascript - 如何根据表格单元格值将图标更改为“加号”或“减号”
- typescript - TypeError:无法读取未定义的属性“推送”(将 this.array 传递给回调函数)
- python - 在星形图案内打印?
- c++ - 给定的字符串应该使用递归函数反转
- android - 以编程方式启用移动数据 Android 8.0