2017-09-08 9 views
0

チャートjを使用するAureliaプロジェクトがあります。私はグラフをうまく表示することができますが、グラフオプションは使用されていないようです。グラフオプションがチャートjsで使用されていません

私は次のことを行いtypescriptですコントローラを持っている:

SimpleLineData: LinearChartData; 
optionschart: ChartSettings; 

activate() { 

    this.optionschart = this.chartoptions; 
    this.xx(); 
    setInterval(this.yy.bind(this), 1000); 
} 

public xx() { 

     this.SimpleLineData = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [ 
      { 
       label: "My First dataset 1", 
       fillColor: '#9b0391', 
       strokeColor: '#9b0391', 
       pointColor: '#9b0391', 
       pointStrokeColor: '#9b0391', 
       pointHighlightFill: '#9b0391', 
       pointHighlightStroke: '#9b0391', 
       borderColor: "#9b0391", 
       data: [65, 59, 80, 81, 56, 55, 40] 
      }, 
      { 
       label: "My Second dataset 2", 
       fillColor: 'rgba(151,187,205,0.2)', 
       strokeColor: 'rgba(151,187,205,1)', 
       pointColor: 'rgba(151,187,205,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(151,187,205,1)', 
       borderColor: "rgba(151,187,205,1)", 
       data: [28, 48, 40, 19, 86, 27, 90] 
      } 
     ] 
    } 
} 

public yy() { 
    this.SimpleLineData.datasets[0].data[0] = this.x; 
    this.x++; 
} 

public chartoptions = { 
    animation: false 
}; 

そして、私のhtmlで私は:

yy()は、データが更新され、その後と呼ばれるが、チャートが再びレンダリングされる
<chart type="line" style="width: 50%; height: 50%; display: block;" should-update="true" throttle="1000" naive-options="optionschart" data.bind="SimpleLineData"></chart> 

アニメーションと一緒に。たとえ私がanimation: falseオプションを設定したとしても。

誰かが摂取していますか?

答えて

2

あなたはあなたのhtmlの入力ミスがあります。 naive-optionsnative-optionsに変更する必要があります。 documentationによれば、まだ動作していない可能性があります。native-options.bind

+1

これは、バインドを含む解決策でした。どうもありがとう。 – RSNL

関連する問題