2017-09-04 9 views
0

私は」このpluginjqPlotメーターゲージでデータを渡すには?

私のページ上のゲージがあります使用してメートル:

s1 = [50000]; 

    plot4 = $.jqplot('chart4',[s1],{ 
    seriesDefaults: { 
     renderer: $.jqplot.MeterGaugeRenderer, 
     rendererOptions: { 
      label: 'Metric Tons per Year', 
      labelPosition: 'bottom', 
      labelHeightAdjust: -5, 
      intervalOuterRadius: 85, 
      ticks: [10000, 30000, 50000, 70000], 
      intervals:[22000, 55000, 70000], 
      intervalColors:['#66cc66', '#E7E658', '#cc6666'] 
     } 
    } 
}); 

を私は次のシナリオをしたい:ユーザーが入力で番号を入力し、プレスを提出し、矢印がゲージにこの値を示しています。だから、私は入力を作り、右のゲージのコードの上にこのコードを追加しました:

$(".btn").click(function() { 
    var data = $("#test").val(); 
    s1 = [data]; 
    console.log(s1); 
    return s1; 
}); 

コンソールには、値を出力しますが、矢印は、この値を表示するようにする方法?このための方法はドキュメントで見つけることができません。

plot.replot(); 

完全なクリック機能:あなたは、ゲージを再描画するreplot()を呼び出す必要があり、その後

plot.series[0].data[0] = [1, newValue]; 

答えて

0

あなたが動的に値を更新するために、ボタンのクリック機能に次の行を使用することができますは:

$(".btn").click(function() { 
    var newValue = $("#test").val(); 
    plot.series[0].data[0] = [1, newValue]; 
    plot.replot(); 
    return s1; 
}); 

This Fiddleはworkiを示しますデモ。テキストボックスに値を入力し、 "Change Value"をクリックしてゲージを更新します。

関連する問題