charts.jsがajaxリクエスト後に更新されない

Question

私はjsとjqueryで完全なnewbですが、FlaskとAjaxリクエストを使用して適切に表示するためのチャートを取得する方法を邪魔しています。私が問題を抱えているところでは、チャートデータをリフレッシュすることになっています。

$(document).ready(function() { 
    var getdata = $.post('/charts'); 
    var ctx = document.getElementById('myChart').getContext('2d'); 
    var myChart 

getdata.done(function(results){ 

    var chartData = { 
    labels: results['month'], 
    datasets: [{ 
     label: 'Debits', 
     data: results['debit'], 
     backgroundColor: "rgba(153,255,51,0.4)" 
    }, { 
     label: 'Credits', 
     data: results['credit'], 
     backgroundColor: "rgba(255,153,0,0.4)" 
    }, { 
     label: 'Balance', 
     data: results['balance'], 
     backgroundColor: "rgba(50,110,0,0.4)" 
    }] 
    } 

    myChart = new Chart(ctx, {type: 'line', data: chartData}); 
}); 

$("form :input").change(function() { 
    year = $(this).val(); 
    console.log(year) 
    $.ajax({ 
     type: "POST", 
     url: "/data", 
     data: {'year':year}, 

     success: function(results){ 
      var updatedData = { 
      labels : results['month'], 

      datasets : [{ 
        label: 'Debits', 
        data: results['debit'], 
        backgroundColor: "rgba(153,255,51,0.4)" 
        }, { 
        label: 'Credits', 
        data: results['credit'], 
        backgroundColor: "rgba(255,153,0,0.4)" 
        }, { 
         label: 'Balance', 
         data: results['balance'], 
         backgroundColor: "rgba(50,110,0,0.4)" 
        }] 
        } 
      myChart= new Chart(ctx, {type: 'line', data: updatedData}); 
     } 
    }); 
}); 

}); 

次のコードのように、私は新しいグラフとしてそれを作成した場合、私はうまく表示するチャートを得ることができます。しかし、私は

myChart.update(updatedData) 

何にも最後の行を変更した場合に起こる、私はドン何らかのエラーが発生した場合、グラフは更新されません。何もない。奇妙なことは、myChartがAjaxリクエストの後に再度作成する必要がないので、myChartがグローバルであることが分かっていることです。

おかげでデータを変更し、更新を呼び出すcharts.jsのドキュメント（http://www.chartjs.org/docs/#getting-started-creating-a-chart）から

Answer 1

、あなたの最初の必要性（更新関数の引数は、データではなく、継続時間など）：

.update（duration、lazy）

グラフの更新をトリガーします。これは、データオブジェクト全体を置き換えた後でも安全に呼び出すことができます。これにより、すべてのスケール、凡例が更新され、グラフが再描画されます。だからあなたの場合

// duration is the time for the animation of the redraw in milliseconds 
// lazy is a boolean. if true, the animation can be interrupted by other animations 
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50 
myLineChart.update(); // Calling update now animates the position of March from 90 to 50. 

：

myChart.data = updatedData; 
myChart.update();