2016-05-12 8 views
0

私はデータの集まりがロードされたモリスチャートを持っています。各項目には6つの異なるデータ値があります。私は、2つの異なるデータセットを切り替える必要があります。しかし、それはしていません、ここで Morrisチャートに異なるデータを表示する方法は?

[ 
{ 
'Target_A':'0', 
'Target_B':'0', 
'A':'12', 
'B':'12', 
'A2':'12', 
'B2':'4', 
'xKeyVal':'2011-12-19' 
}, 
{ 
'Target_A':'0', 
'Target_B':'0', 
'A':'12', 
'B':'12', 
'A2':'8', 
'B2':'3', 
'xKeyVal':'2012-03-12' 
} 
] 

を切り替えるには、私のコードです:簡単な例として

は、ここで私は常にターゲットを表示したいとA/BおよびA2/B2を切り替えているの私のデータであります作業。私はどちらのデータもページの読み込みで正常に読み込むことができますが、まだそれを変更することはできません。

function ToggleCC(isChecked){ //This is fired from a checkbox 
if(isChecked) 
{ 
    chart.options.ykeys = ['A2', 'Target_A', 'B2', 'LastTarget_B']; 
    chart.options.lables= ['A2', 'Target_A', 'B2', 'LastTarget_B']; 
} 
else 
{ 
    chart.options.ykeys = ['A', 'Target_A', 'B', 'Target_B']; 
    chart.options.labels = ['A', 'Target_A', 'B', 'Target_B']; 
} 
//chart.setData(); 
chart.redraw(); 

}

チャートはdocument.ready関数で作成されたグローバル変数です。

$(document).ready(function() { 
    chart = new Morris.Line({ 
     ... 

キーとラベルを更新してグラフを更新するにはどうすればよいですか?

答えて

0

私はそうのようなsetDataメソッドにチャートデータオブジェクトを渡してみました、私の既存のデータ再バインドしたかったので:

chart.setData(chart.data); 

をしかし、chart.Dataオブジェクトは、データIの形式と一致していません最初に入った。私の解決策は、変数に自分のjsonデータを設定し、setDataを呼び出してそのデータを渡すことでした。これが最終コードです。

var dataGraph = 'The exact same string/data which was in the Line Chart constructor option.'; 


    $(document).ready(function() { 
     chart = new Morris.Line({ 
      // ID of the element in which to draw the chart. 
      element: 'IOPChart', 
      // Chart data records -- each entry in this array corresponds to a point on 
      // the chart. 
      data: dataGraph , 
... continue options... 

最後に私の更新機能では、pageloadからその変数にsetDataを設定しました。

chart.setData(dataGraph); 
関連する問題