如何使用 JSON 和 ChartJS 制作一个显示某个年龄段人数的饼图?
Posted
技术标签:
【中文标题】如何使用 JSON 和 ChartJS 制作一个显示某个年龄段人数的饼图?【英文标题】:How do I make a pie chart showing number of people in an age group with JSON and ChartJS? 【发布时间】:2021-09-11 10:41:02 【问题描述】:我一直在尝试调整上一个问题中的代码,我使用 JSON 处理程序从控制器中的数据库中提取数据。
现在,我正在尝试创建一个显示不同年龄段的饼图。我使用 Count() 来获取这里的数字
var lessthreefive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c <= 35).Count();
var lessfournine = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 35 && c <= 49).Count();
var lessfivefive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 49 && c <= 55).Count();
var lesssixzero = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 55 && c <= 60).Count();
var lesssixfive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 60 && c <= 65).Count();
var moresixfive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 65).Count();
FTE 和 PTE 分别是全职和兼职工作。这是为了确保这些数字仅适用于现有员工,因为也有辞职员工的数据。
尝试做这样的事情
【问题讨论】:
见This question 感谢 Nagib,帮助了 【参考方案1】:在关注 Nagib 的评论链接后自己想通了。
把它留在这里,以防其他人尝试同样的事情。
$(document).ready(function ()
$.ajax(
type: "Get",
url: "/?handler=ageData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response)
var datatf = response.below35;
var datafn = response.below49;
var dataff = response.below55;
var dataso = response.below60;
var datasf = response.below65;
var dataasf = response.above65;
var cage = document.getElementById('ageChart').getContext('2d');
var ageChart = new Chart(cage,
type: 'pie',
data:
labels: ['< 36', '36 - 49', '50 - 55', '56 - 60', '61 - 65', '> 65'],
datasets: [
label: 'Age Group',
data: [datatf, datafn, dataff, dataso, datasf, dataasf],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
]
,
options:
scales:
y:
beginAtZero: true
);
);
);
在我的处理程序中,变量与问题中的变量相同,并使用JsonResult ...below35 = lessthreefive...
调用它
最终结果
【讨论】:
以上是关于如何使用 JSON 和 ChartJS 制作一个显示某个年龄段人数的饼图?的主要内容,如果未能解决你的问题,请参考以下文章
Laravel 路由上的 Ajax 调用,返回一个包含 ChartJS 标签日期的 json 编码数组
ChartJs,如何在折线图中的两个数据集之间获得不同的颜色填充?