Я работаю над веб-приложением для клиента и имеет множество графиков для отображения данных о нескольких вещах.ChartJS: Как динамически создавать массивы данных
В настоящее время я работаю на графике, который покажет навыки для каждого элемента работы, так как рабочие элементы будут добавлены и изменены все время я не могу иметь настройки диаграммы, как это ...
var workName1 = {
labels : graphWork['New Work']['labels'],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
highlightFill : "rgba(151,187,205,0.75)",
data: graphWork['New Work']['values']
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(workName1, {
// invertXY: true
// responsive : true,
});
}
Делая это таким образом будет слишком статичным, а также потому, что у меня будет падение вниз, что функции вроде как это,
$("#typeUser").change(function() {
window.myBar.destroy();
chartType = $('#typeUser').val();
if(chartType == "Random Work"){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(randomWork, {
// responsive : true,
invertXY: true
});
}else if(chartType == "New Work"){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(workName1, {
// responsive : true,
invertXY: true
});
}
});
Опять же, что также очень статичны и не позволяют динамических изменений, если новая работа будет добавлена ,
Вопрос: Что я могу сделать, чтобы настроить это динамически. Я подумал о том, как сделать $ .each на graphWork, а затем некоторые из них, как создание переменных устанавливает этот путь, но затем я не знаю, как бы я сделал функцию изменения или если это правильный способ сделать это?
У меня есть JSFiddle, который вытаскивает данные и может быть использован для тестирования и для просмотра того, что я делаю. https://jsfiddle.net/L6396hsq/1/
.update() Вызов обновления() на вашем экземпляре Chart будет вновь сделать диаграмму с любыми обновленными значениями, позволяющими редактировать значение нескольких существующих точек, а затем отображать их в одном анимированном цикле рендеринга. –
Можете ли вы дать мне пример кода? Не знаю, как это реализовать. –
Как изменяются ваши данные? JQuery/Ajax? –