Динамическое изменение параметров диаграммы в Chart.js

Question

У меня есть страница, где я динамически загружаю разные диаграммы, которые обновляют себя новыми данными из SQL-таблицы. У них максимальные и минимальные ограничения, и я могу сделать точки на диаграммах линий меняющимися, если они нарушают их пределы (если они слишком высокие или слишком низкие, они становятся красными, в противном случае они зелеными)

К сожалению, когда я пытаюсь изменить вариант анимации диаграмм или параметр bezierCurves, на который он не отвечает, я просмотрел документацию на диаграмме и смог найти только, как установить эти параметры при создании диаграммы ... Мне нужно сделать это с помощью функции на основе интервалов после графики сделаны в зависимости от пользовательского ввода ... т.е.

у меня есть коллекция радиокнопок: анимированные - Не анимированное - bezierCurves - нет bezierCurves

Посмотреть на картинке :)

каждого из них установлен свой респектабельный переменную истина/ложь в зависимости кастрированный баран они проверяются. Затем, каждый раз, когда я обновляю диаграммы, я пытаюсь изменить параметры в значения переменных (если они отличаются от старых)

Позвольте мне дать вам некоторый код clairify :)

Update функция:

// Standard values for all charts 
$old_animation = true; 
$old_curved = true; 

// Start Update funtion for the test chart 
setInterval(function update() { 

// Set the new options value from the entered user input (on the site) 
$curved = $('#curved').val(); 
    $animation = $('#animation').val(); 
    if ($old_animation != $animation || $old_curved != $curved) { 

     test_chart.options.animation = $animation; 
     test_chart.options.bezierCurves = $curved; 

     // Tried the following as well 
     //test_chart.animation = $animation; 
     //test_chart.options.animation = $animation; 


     $old_animation = $animation; 
     $old_curved = $curved; 
    } 

    // Set dataset point 0 value to that of point 1, point 1 to that of point 2 and so on... 
    test_chart.datasets[0].points[0].value = test_chart.datasets[0].points[1].value; 
    test_chart.datasets[0].points[1].value = test_chart.datasets[0].points[2].value; 
    test_chart.datasets[0].points[2].value = test_chart.datasets[0].points[3].value; 
    test_chart.datasets[0].points[3].value = test_chart.datasets[0].points[4].value; 
    test_chart.datasets[0].points[4].value = test_chart.datasets[0].points[5].value; 
    test_chart.datasets[0].points[5].value = test_chart.datasets[0].points[6].value; 
    test_chart.scale.xLabels[0] = test_chart.scale.xLabels[1]; 
    test_chart.scale.xLabels[1] = test_chart.scale.xLabels[2]; 
    test_chart.scale.xLabels[2] = test_chart.scale.xLabels[3]; 
    test_chart.scale.xLabels[3] = test_chart.scale.xLabels[4]; 
    test_chart.scale.xLabels[4] = test_chart.scale.xLabels[5]; 
    test_chart.scale.xLabels[5] = test_chart.scale.xLabels[6]; 

    // Get the latest SQL value from the live feed div (hidden) and put that in the last data point 
    $live_test = $('#live_test').html(); 
    $live_test = parseInt($live_test); 
    $live_test = $live_test/<?php echo $column_numerator; ?>; 

    // Get the last update time for the label of the last data point 
    $live_updated = $('#live_updated').html().substr(11); 
    test_chart.scale.xLabels[6] = $live_updated; 
    test_chart.datasets[0].points[6].value = $live_test; 
    console.log('Latest test value = ' + $live_test + ' this has been updated @: ' + $live_updated); 




    temperature_chart.update(); 
}, 4000); 

Answer 1

Поскольку опции могут быть установлены только при создании диаграммы, это звучит, как вам нужно, чтобы воссоздать/перерисовки графики, когда у вас есть новые возможности для использования. Вы можете установить прослушиватель на переключателях для воссоздания диаграмм с новыми параметрами.