Отображение данных JSON в chartjs
Я хочу отображать эти данные с помощью chart.js. Идея состоит в том, чтобы визуализировать результаты опроса. Основной пользователь будет руководителем группы. Я думаю о трех линейных диаграммах для всех questionId. Диаграмма отобразит дату, имя человека и значение из вопроса.
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
покажи нам, что ты пробовал? мы здесь не для того, чтобы делать вашу работу: D
Какой у Вас вопрос?
@satyampathak const CHART = document.getElementById ('lineChart'); var lineChart = new Chart (CHART, {type: 'line', data: {labels: Object.keys (data [results.teamMemberId]]), datasets: [{label: 'My first dataset', fill: false, lineTension: 0, backgroundColor: «rgba (75,192,192,0.4)», borderColor: «rgba (75,192,192,1)», borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJointStyle: 'miter', данные: Object.values (данные [results.questions.questionId])}]}})
@RhalpDarrenCabrera нет, из файла js
@progNewbie как отображать данные из getHistoricalData () в chart.js
У тебя две разные даты. Итак, как должна выглядеть диаграмма?
@progNewbie Я подумал о двух графиках - по одному на каждую дату, с людьми и их ценностями
Но у каждого человека есть три разных значения. Как ты хочешь это представить? Если вы можете четко сказать мне, я могу вам помочь.
@progNewbie хорошо, может быть так: первый график покажет, например, значение из questionId: «1» для всех людей за один день, второй: значение из questionId: «1» за второй день. И так со всеми ценностями.
Тогда вам понадобится более двух графиков.
@progNewbie да, я думаю, что основная проблема в том, что я не знаю, как это делать :) может быть, если я найду способ сделать сначала, тогда будет легче сделать это правильно
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно сделать что-то вроде этого это
Попробуйте прочитать свои данные так:
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;
}
вам нужно не всегда брать нулевой индекс, как я, а перебирать ваши teamMembers.
Надеюсь, это поможет. Просто попробуйте сделать это сами.
ваши данные пришли из PHP?