用 json 填充 CanvasJS
Posted
技术标签:
【中文标题】用 json 填充 CanvasJS【英文标题】：Fill CanvasJS with json 【发布时间】：2021-10-16 12:12:03 【问题描述】：目前我正在尝试第一次使用 javascript 创建图表。 我想在主页面使用填充图json方法在屏幕上显示数据。
当我检查 json 格式的 url 时，输出如下所示。
[
"CV_STATU":"Reddedildi",
"MyCount":366
,
"CV_STATU":null,
"MyCount":23
,
"CV_STATU":"Görüşmeye Bekleniyor",
"MyCount":14
]
但是当我调用主页（localhost:56569/Yonetim/Home/MainPage）时，什么都没有显示。
public class HomeController : Controller
public ActionResult MainPage()
var model = new CvViewModel();
return View(model);
public JsonResult FillChart()
using (MULAKATDBEntities1 ent = new MULAKATDBEntities1())
var dbStatuList = ent.CV.GroupBy(x => new x.CV_STATU ).Select(g => new g.Key.CV_STATU , MyCount = g.Count() ).ToList();
return Json(JsonConvert.SerializeObject(dbStatuList), JsonRequestBehavior.AllowGet);
我的javascript代码如下：
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"/>
</body>
</html>
<script type="text/javascript">
window.onload()=function()
var dataPoints = [];
$.getJSON("Yonetim/Home/FillChart", function (data)
for (var i = 0; i <= data.length - 1; i++)
dataPoints.push( label: data[i].CV_STATU, y: parseInt(data[i].MyCount) );
var chart = new CanvasJS.Chart("chartContainer",
theme: "theme2",
title:
text: "CanvasJS Charts "
,
data: [
type: "column",
dataPoints: dataPoints
]
);
chart.render();
);
</script>
如何在屏幕上创建包含 cv_statu 和 mycount 信息的图表？
【问题讨论】：
您能否像代码一样插入 JSON 以提高可读性，所以支持 JSON。 当然，我插入了 也许您面临 CORS 限制。控制台中是否有错误（浏览器中的 F12）？ 我猜是 url 错误：localhost:56569/Yonetim/Home/Yonetim/Home/FillChart 我解决了错误但数据仍然没有填写 【参考方案1】：这是一个可行的解决方案：
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;" ></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
$.getJSON("https://79723e01-80d8-4331-ad9f-5ec9b34a6857.mock.pstmn.io/Yonetim/Home/FillChart", function (data)
const dataPoints = data.map(point =>
return
label: point.CV_STATU,
y: parseInt(point.MyCount),
)
const chart = new CanvasJS.Chart("chartContainer",
theme: "theme2",
title:
text: "CanvasJS Charts"
,
data: [
type: "column",
dataPoints: dataPoints
]
);
chart.render();
)
)
</script>
您需要将$.getJSON 中的网址更改为您的。仅当您将页面作为服务器启动时，我的才能工作。
【讨论】：
我遇到了错误“data.map is not function” 我刚刚将代码从我的答案复制到编辑器，它对我有用。你用什么浏览器？ codesandbox.io/embed/… - 在这里查看，一切正常。以上是关于用 json 填充 CanvasJS的主要内容，如果未能解决你的问题，请参考以下文章
用 JavaScript 中的 JSON 数据动态填充表格的快速方法