ractiveでchart.jsを更新

Question

いくつかのデータの視覚化では、私はractiveとchart.jsを使用しています。初期の図面は素晴らしいですが、データが変更されたときにグラフを自動的に更新する方法が見つかりません。これまでのところ私は（簡体字）得た：

const Stats = '<canvas id="myChart" width="400" height="400"></canvas>' 
    new Ractive ({ 
     el: '#stats', 
     template: Stats, 
     magic: true, 
     modifyArrays: true, 
     data: {docs}, // <= some JSON Data 
     computed: { 
      Data1() { 
       let tempList = this.get('docs'); 
       // rearrange & filter Data 
       return tempList ; 
      }, 
      Data2() { 
       let tempList2 = this.get('docs'); 
       // rearrange & filter Data 
       return tempList2 ; 
      }, 
      Data3() { 
       let tempList3 = this.get('docs'); 
       // rearrange & filter Data 
       return tempList3 ; 
      }, 
      } 

     }, 
     onrender: function() { 
      let DataSet1 = this.get('Data1'); 
      let DataSet2 = this.get('Data2'); 
      let DataSet3 = this.get('Data3'); 
      let ctx = document.getElementById("myChart"); 
      var myChart = new Chart(ctx, { 
       type: 'doughnut', 
       data: { 
        labels: ["Data 1", "Data 1", "Data 3"], 
        datasets: [{ 
         label: 'All my Data', 
         data: [DataSet1.length, DataSet2.length, DataSet3.length], 
         backgroundColor: [ 
          'rgba(255, 99, 132, 0.2)', 
          'rgba(255, 159, 64, 0.2)', 
          'rgba(75, 192, 192, 0.2)' 
         ], 
         borderColor: [ 
          'rgba(255,99,132,1)', 
          'rgba(255, 159, 64, 1)', 
          'rgba(75, 192, 192, 1)' 
         ], 
         borderWidth: 1 
        }] 
       }, 
       options: { 
        responsive: false 
       } 
      }); 

     }, 
     onchange: function() { 
      let newData = this.get('docs') 
      addData(myChart, label, newData) 
      function addData(chart, label, data) { 
       chart.data.labels.push(label); 
       chart.data.datasets.forEach((dataset) => { 
        dataset.data.push(data); 
       }); 
       chart.update(); 
      } 
     } 
    }); 

はもちろん、私はラインchart.data.labels.push(label);でエラーを取得し、そしてまた私は、onrender機能していない初期データセットを私の計算された値が必要になることはかなり確信しています。しかし、私は本当にそれらを更新機能に入れる方法がないか、またはこの機能がまったく正しい方法であるかどうかを知りません。

Answer 1

サードパーティのプラグインを使用している場合は、Ractiveのdecoratorsを使用することをお勧めします。 This post on ractivejs-and-jquery-pluginsは、ファイルアップロードコントロールに基づいてデコレータを実装する方法の出発点を示しています。私は、パラメータとしてデータとデコレータを構築することをお勧めしてUPDATE機能を実装することを忘れないでください、あなたの場合は

（ここで、あなたのケースであなたはつもりあなたのチャートのための新しいデータで更新メソッドを呼び出す）

Answer 2

私はChart.jsのための自分のデコレータを書く方法を理解できなかったので、私のために働く解決策を投稿すると思った。私はそれが最善の方法だとは思わないし、確かデコレータのためになるより良い方法を（それゆえ、私は正しい答えとして、このソリューションをマークしていない）が、それは動作します：ヒントの

const Stats = '<canvas id="myChart" width="400" height="400"></canvas>' 
new Ractive ({ 
    el: '#stats', 
    template: Stats, 
    magic: true, 
    modifyArrays: true, 
    data: {docs}, // <= some JSON Data 
    computed: { 
     Data1() { 
      let tempList = this.get('docs'); 
      // rearrange & filter Data 
      return tempList ; 
     }, 
     Data2() { 
      let tempList2 = this.get('docs'); 
      // rearrange & filter Data 
      return tempList2 ; 
     }, 
     Data3() { 
      let tempList3 = this.get('docs'); 
      // rearrange & filter Data 
      return tempList3 ; 
     }, 
     } 

    }, 
    onrender: function() { 
     let DataSet1 = this.get('Data1'); 
     let DataSet2 = this.get('Data2'); 
     let DataSet3 = this.get('Data3'); 
     let ctx = document.getElementById("myChart"); 
     myChart = new Chart(ctx, { 
      type: 'doughnut', 
      data: { 
       labels: ["Data 1", "Data 1", "Data 3"], 
       datasets: [{ 
        label: 'All my Data', 
        data: [DataSet1.length, DataSet2.length, DataSet3.length] 
       }] 
      } 
     }); 

    }, 
    onchange: function() { 
     let changedData1 = this.get('Data1'); 
     let changedData2 = this.get('Data2'); 
     let changedData3 = this.get('Data3'); 
     myChart.data.datasets[0].data[0] = changedData1.length; 
     myChart.data.datasets[0].data[1] = changedData2.length; 
     myChart.data.datasets[0].data[2] = changedData3.length; 
     myChart.update(); 
     } 
    } 
});