Javascript 在chartjs中显示JSON数据
我想用chart.js显示这个数据。其目的是将调查结果可视化。主要用户将是团队负责人。我认为所有问题都有三个折线图。图表将显示问题的日期、人名和值Javascript 在chartjs中显示JSON数据,javascript,json,chart.js,Javascript,Json,Chart.js,我想用chart.js显示这个数据。其目的是将调查结果可视化。主要用户将是团队负责人。我认为所有问题都有三个折线图。图表将显示问题的日期、人名和值 getHistoricalData() { return [ { date: "2018-03-14T12:00:00Z", results: [ { teamMemberId: "Abby", questions: [
getHistoricalData() {
return [
{
date: "2018-03-14T12:00:00Z",
results: [
{
teamMemberId: "Abby",
questions: [
{
questionId: "1",
value: 5
},
{
questionId: "2",
value: 3
},
{
questionId: "3",
value: 3
}
]
},
{
teamMemberId: "Bill",
questions: [
{
questionId: "1",
value: 4
},
{
questionId: "2",
value: 4
},
{
questionId: "3",
value: 4
}
]
},
{
teamMemberId: "Castor",
questions: [
{
questionId: "1",
value: 5
},
{
questionId: "2",
value: 5
},
{
questionId: "3",
value: 5
}
]
},
{
teamMemberId: "David",
questions: [
{
questionId: "1",
value: 5
},
{
questionId: "2",
value: 3
},
{
questionId: "3",
value: 3
}
]
},
{
teamMemberId: "Eugenia",
questions: [
{
questionId: "1",
value: 2
},
{
questionId: "2",
value: 3
},
{
questionId: "3",
value: 4
}
]
}
]
},
{
date: "2018-03-07T12:00:00Z",
results: [
{
teamMemberId: "Abby",
questions: [
{
questionId: "1",
value: 5
},
{
questionId: "2",
value: 4
},
{
questionId: "3",
value: 5
}
]
},
{
teamMemberId: "",
questions: [
{
questionId: "1",
value: 4
},
{
questionId: "2",
value: 3
},
{
questionId: "3",
value: 4
}
]
},
{
teamMemberId: "Castor",
questions: [
{
questionId: "1",
value: 4
},
{
questionId: "2",
value: 4
},
{
questionId: "3",
value: 5
}
]
},
{
teamMemberId: "David",
questions: [
{
questionId: "1",
value: 4
},
{
questionId: "2",
value: 4
},
{
questionId: "3",
value: 2
}
]
},
{
teamMemberId: "Eugenia",
questions: [
{
questionId: "1",
value: 3
},
{
questionId: "2",
value: 3
},
{
questionId: "3",
value: 3
}
]
}
]
},
];
};
我不知道如何下载这种数据。先谢谢你
Krzysiek你需要这样做 尝试如下方式读取数据:
var dates = [];
var allTeamMember = [];
getHistoricalData().forEach(function(element, index, array) {
dates.push(element.date);
var teamMember = []
element.results.forEach(function(element, index, array) {
var questions = [];
element.questions.forEach(function(element, index, array) {
questions.push(element.value);
});
teamMember[element.teamMemberId] = questions;
});
allTeamMember.push(teamMember);
});
dates.forEach(function(element, index, array) {
$("#charts").append("<canvas id=\"chart-" + index + "\" width=\"400\" height=\"400\"></canvas>");
var ctx = $("#chart-" + index);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3],
datasets: [{
label: 'Datum: ' + dates[index],
data: allTeamMember[index][getKeys(allTeamMember[index])[0]],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
function getKeys(obj, filter) {
var name,
result = [];
for (name in obj) {
if ((!filter || filter.test(name)) && obj.hasOwnProperty(name)) {
result[result.length] = name;
}
}
return result;
}
这将为您提供一个包含所有日期的数组。还有一个数组,每个日期都有一个内部数组,包含所有团队成员及其问题值
拥有这些数据后,您可以按如下方式从中生成图表:
var dates = [];
var allTeamMember = [];
getHistoricalData().forEach(function(element, index, array) {
dates.push(element.date);
var teamMember = []
element.results.forEach(function(element, index, array) {
var questions = [];
element.questions.forEach(function(element, index, array) {
questions.push(element.value);
});
teamMember[element.teamMemberId] = questions;
});
allTeamMember.push(teamMember);
});
dates.forEach(function(element, index, array) {
$("#charts").append("<canvas id=\"chart-" + index + "\" width=\"400\" height=\"400\"></canvas>");
var ctx = $("#chart-" + index);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3],
datasets: [{
label: 'Datum: ' + dates[index],
data: allTeamMember[index][getKeys(allTeamMember[index])[0]],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
function getKeys(obj, filter) {
var name,
result = [];
for (name in obj) {
if ((!filter || filter.test(name)) && obj.hasOwnProperty(name)) {
result[result.length] = name;
}
}
return result;
}
dates.forEach(函数(元素、索引、数组){
$(“#图表”)。追加(“”);
var ctx=$(“#图表-”+指数);
var myChart=新图表(ctx{
键入:“行”,
数据:{
标签:[1,2,3],
数据集:[{
标签:“基准:”+日期[索引],
数据:allTeamMember[index][getKeys(allTeamMember[index])[0]],
背景颜色:[
"rgba(255,99,132,0.2)",,
“rgba(54162235,0.2)”,
"rgba(255,206,86,0.2)",,
“rgba(751921920.2)”,
“rgba(153102255,0.2)”,
‘rgba(255、159、64、0.2)’
],
边框颜色:[
"rgba(255,99132,1)",,
“rgba(54162235,1)”,
"rgba(255,206,86,1)",,
"rgba(751921921)",,
"rgba(153102255,1)",,
‘rgba(255、159、64、1)’
],
边框宽度:1
}]
},
选项:{
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的
}
}]
}
}
});
});
功能获取键(obj、过滤器){
变量名,
结果=[];
for(obj中的名称){
if((!filter | | filter.test(名称))和&obj.hasOwnProperty(名称)){
结果[result.length]=名称;
}
}
返回结果;
}
您不必像我一样总是使用索引0,而是需要迭代您的团队成员
希望有帮助。你自己试试看。你的数据来自PHP吗?告诉我们你做了什么?我们不是来做你的工作的:dw你的问题是什么?@satyampathak const CHART=document.getElementById('lineChart');var lineChart=new Chart(图表,{type:'line',数据:{labels:Object.keys(data[results.teamMemberId]),数据集:[{label:'My first dataset',fill:false,lineTension:0,backgroundColor:“rgba(75192192,0.4)”,borderColor:“rgba(75192192,1)”,borderCapStyle:'butt',borderDashOffset:[],borderDashOffset:0.0,borderJointStyle:'miter',数据:Object.values(数据[results.questions.questionId])}]}}@rhalpdarrencAbera nope,来自js文件