用json填充CanvasJS
用json填充CanvasJS
提问于 2021-08-13 08:18:38
目前，我正在尝试第一次使用javascript创建图表。我想在主页面中使用fill chart json方法在屏幕上显示数据。
当我检查json格式的url时，输出如下所示。
[
{
"CV_STATU":"Reddedildi",
"MyCount":366
},
{
"CV_STATU":null,
"MyCount":23
},
{
"CV_STATU":"Görüşmeye Bekleniyor",
"MyCount":14
}
]但是当我调用mainpage(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信息的图表？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-13 10:05:18
以下是一个可行的解决方案：
<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中的url更改为您的url。只有当您将页面作为服务器启动时，我的页面才能工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68769003
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号