Chart.jsで動的にグラフオプションを変更する

Question

私はSQLテーブルから新しいデータで自分自身を更新する異なるチャートを動的に読み込むページがあります。 上限と下限があり、限界に違反すると折れ線の色が変わることがあります（高すぎたり小さすぎると赤に変わり、そうでなければ緑になります）

悲しいことに、グラフのアニメーションオプション、またはベジェ曲線のオプションに応答しない場合は、chartjsページのドキュメントを見て、チャートを作成するときにこれらのオプションを設定する方法しか見つけられませんでした。 - アニメーションなし - bezierCurves - ノーbezierCurves

アニメーション：チャートは、ユーザの入力に応じて作られています...つまり

私はラジオボタンのコレクションを持っています

はPICで見る:)彼らがチェックされている天気を

は、彼らはそれぞれ、真/偽依存して自分の立派な変数を設定します。 （彼らは古いものと異なる場合）次に、私はチャートを更新するたびに、私は、変数の値にオプションを変更しようと

は、私はあなたに:)

アップデートをclairifyするためにいくつかのコードを挙げてみましょう機能：グラフを作成するときにオプションのみ設定することができますので、あなたが使用する新しいオプションが用意されていたときにチャートを再描画/再作成する必要があるよう

// 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

、それが聞こえます。ラジオボタンにリスナーを設定して、新しいオプションでチャートを再作成することができます。