c# - 图表未显示在 ASP.NET MVC 页面上
问题描述
我对 asp.net 很陌生,所以我尝试在我的视图中添加一个带有 charts.js 的简单条形图,但我得到的只是一个空页面。
控制器
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<string> iData = new List<string>();
List<string> iData2 = new List<string>();
iData.Add("Sam");
iData2.Add("555");
iData.Add("Alex");
iData2.Add("666");
iData.Add("Michael");
iData2.Add("777");
ViewBag.Value_List = iData2;
ViewBag.Name_List = iData;
return View();
}
}
看法:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Charts</title>
<script src="~/Scripts/Chart.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
var barChartData =
{
labels: [@Html.Raw(ViewBag.Name_List)],
datasets: [{
label: 'ChartTest',
backgroundColor: [
"#f990a7",
"#aad2ed",
"#9966FF",
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
data: [@ViewBag.Value_List]
}]
};
window.onload = function () {
var ctx1 = document.getElementById("barcanvas").getContext("2d");
window.myBar = new Chart(ctx1,
{
type: 'bar',
data: barChartData,
options:
{
title:
{
display: true,
text: "ChartTest"
},
responsive: true,
maintainAspectRatio: true
}
});
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="barcanvas"></canvas>
</div>
</body>
</html>
我试图帮助我完成一些教程,但对我没有任何帮助。
有人可以告诉我我做错了什么吗?
解决方案
需要进行两项更改:
在控制器中将数据序列化为 JSON:
using System.Web.Script.Serialization;
var js = new JavaScriptSerializer();
ViewBag.Value_List = js.Serialize( iData2);
ViewBag.Name_List = js.Serialize(iData);
删除视图中多余的方括号:
labels: @Html.Raw(ViewBag.Name_List),
data: @Html.Raw(ViewBag.Value_List)
您需要创建“插入式”JavaScript 来表示数据。
labels: ["555","666","777"] ,
data: ["Sam","Alex","Michael"]
推荐阅读
- c# - 加载 .net 包装器无法加载本机依赖项
- php - 我制作插件,我想为用户创建选项以选择徽章颜色,并且在 css 中调用它时遇到问题,没有工作
- java - 我需要在 Eclipse 中设置/配置哪些环境变量(对于 Selenium WebDriver)?如果我不设置/配置它们怎么办?
- jpa - EBeans 更新不保存更改的字段项
- sql - 每个 ID 获取一条记录,具有多个潜在客户值
- javascript - JSON:无法读取未定义的属性“键值”
- python - 有没有更有效的方法来感应鼠标在一堆点上?
- rust - 无法使用 postgres 功能编译 Rust SQLx
- r - R中NA值的线性插值
- uwp - UWP CalendarDatePicker GetTemplate子调用