2015-04-28 3 views
0

Я работаю над веб-приложением для клиента и имеет множество графиков для отображения данных о нескольких вещах.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/

+0

.update() Вызов обновления() на вашем экземпляре Chart будет вновь сделать диаграмму с любыми обновленными значениями, позволяющими редактировать значение нескольких существующих точек, а затем отображать их в одном анимированном цикле рендеринга. –

+0

Можете ли вы дать мне пример кода? Не знаю, как это реализовать. –

+0

Как изменяются ваши данные? JQuery/Ajax? –

ответ

0

u может с .draw() для нового рисования canvaselement, если u заполнил его новыми данными. И с .reflow() U принести запуск движение назад; D

Может попробовать это:

window.myBar.draw(); 
window.myBar.reflow(); 
+0

Можете ли вы дать мне пример кода? Не знаю, как это реализовать. –

Смежные вопросы