chart.js 2.3動的に円グラフデータを読み込む

Question

私は、MTDとYTDデータを切り替えることができる円グラフを持っています。ページが読み込まれるときにグラフが正常に読み込まれます。私はAJAX経由でMTDからYTDにデータを変更するのが難しいです。

私はこれについて多くの投稿を見てきましたが、私が見つけたものは、古いバージョンのchart.js 1.0.1です。

最新のバージョンchart.js 2.3を使いたいです。ここでコードはどんな助けにも大変感謝しています。

HTML：

<div class="chart-responsive"> 
    <canvas id="myPieChart" /> 
</div> 

JAVASCRIPT：

var pieconfig = { 
    type: 'doughnut', 
    data: { 
    datasets: [{ 
     data: [<cfoutput>#valueList(myPieData.totalAmt)#</cfoutput>], // the returned data looks like this (1254.52,223.50,etc.) 
     backgroundColor: [ 
     "#F7464A", 
     "#46BFBD", 
     "#FDB45C", 
     "#949FB1", 
     "#4D5360", 
     "#60A2C9", 
     "#00A65A", 
     "#D2D6DE", 
     "#4D5360", 
     "#00C0EF" 
     ], 
     label: 'Dataset 1' 
    }], 
    labels: [ 
     <cfoutput>#ListQualify(valueList(myPieData.busUnit), "'", ",")#</cfoutput> // the returned label looks like this ('Joe','Jim',etc.) 
    ] 
    }, 
    options: { 
    responsive: true, 
    legend: { 
     position: 'right', 
    }, 
    title: { 
     display: false, 
     text: 'Chart.js Doughnut Chart' 
    }, 
    animation: { 
     animateScale: true, 
     animateRotate: true 
    } 
    } 
}; 

window.onload = function() { 
    var ctx = document.getElementById("myPieChart").getContext("2d");  
    myDoughnut = new Chart(ctx, pieconfig); 
}; 

上記のコードは、ページのロード時に正常に動作します。以下は私の円グラフのデータを更新するコードです。

$.ajax({ 
    type: "POST", 
    url: "/main/piechartdata/", 
    data: {'workList':'sale','rtype':$rType}, 
    dataType: "json", 
    success: function(rData) { 
    console.log(rData.labels); 
    locData = { 
     type: 'doughnut', 
     data: { 
     datasets: [{ 
      data: rData.datapoint // return data looks like this: 4469.37,2455153.58,672038.48,83.27,58821.22,36606.71 
      backgroundColor: [ 
      "#F7464A", 
      "#46BFBD", 
      "#FDB45C", 
      "#949FB1", 
      "#4D5360", 
      "#60A2C9", 
      "#00A65A", 
      "#D2D6DE", 
      "#4D5360", 
      "#00C0EF" 
      backgroundColor: [ 
      "#F7464A", 
      "#46BFBD", 
      "#FDB45C", 
      "#949FB1", 
      "#4D5360", 
      "#60A2C9", 
      "#00A65A", 
      "#D2D6DE", 
      "#4D5360", 
      "#00C0EF" 
      ], 
      label: 'Dataset 1' 
     }], 
     labels: rData.labels //return data looks like this: 'CBS','CFM','CIA','Millennium','OTHER','Thrifty' 
     }, 
     options: { 
     responsive: true, 
     legend: { 
      position: 'right', 
     }, 
     title: { 
      display: false, 
      text: 'Chart.js Doughnut Chart' 
     }, 
     animation: { 
      animateScale: true, 
      animateRotate: true 
     } 
     } 
    }; 

    var ctx = document.getElementById("myPieChart").getContext("2d");  
    myDoughnut = new Chart(ctx, locData); 

    } 
}); 

これは私の最近失敗した試みでした。あなたの助けを前にありがとう！

Answer 1

あなたは2つのオプションがあります：あなたは自分のデータを変更した後、データ呼のupdate（）を更新している場合

を：他に

myDoughnut.data.datasets[0].data[11] = 300; 
    myDoughnut.update(); 

Update Chart

、（破壊すると最初にあなたのチャートを破壊します）グラフを再初期化してください：

myDoughnut.destroy(); 
myDoughnut = new Chart(ctx, locData); 

Destroy Chart

Answer 2

キノの答えは、私は少しここでそれに展開するだろう、正確である：

あなたはすでにここmyDoughnutと呼ばれるチャートオブジェクトを持っており、任意のJavaScriptのオブジェクトと同じように、あなたはそれのメンバーのいずれかにアクセスすることができ、に似て伝統的なoop言語のクラス。

あなたのケースでは、locDataを作成した後、あなたが使用することができるはず：

myDoughnut.data = locData; 
myDoughnut.update(); 

代わりに新しいグラフを作成するのは、あなただけの新しいデータで既存のチャートにデータを交換しています。変更が発生するには、update（）を呼び出す必要があります。

これで問題が解決されることを願っています。