1

この例の「値」は 5、「最大値」は 39 です。プログレス バー ( wijmo プログレスバー) に表示される値は 5.07 です。{0} は、パーセンテージではなく進行状況の値を表示するように進行状況バーに指示する必要があります。最大値を 39 のままにして値を 8 に変更すると、表示される値は 8.19 になります。整数ではなく浮動小数点数が表示される理由について、少し混乱しています。コンソールに整数としてログを記録する self.value() 以外のものを表示するプログレスバー コードには何も表示されません。では、何がこの動作を引き起こしているのでしょうか?

$("#proBarAdherence").wijprogressbar({

  value: Gymloop.completedCount,
  animationOptions: {
    duration: 1000
  },

  maxValue: Gymloop.targetSessions,
  indicatorImage: '/images/progbar_red.png',
  labelAlign: 'running',
  labelFormatString: '{0} sessions completed',
  beforeProgressChanging: function(e,data) {
    console.log('beforeprogresschanging',data);
  },
  progressChanging: function (e,data) {
    console.log('progresschanging',data);

  },
  progressChanged : function (e,data) {
    console.log('progresschanged',data);
  }
});

beforeprogresschanging Object { oldValue="5", newValue=5}
progresschanging Object { oldValue="5", newValue=0}
progresschanging Object { oldValue="0", newValue=1.17}
progresschanging Object { oldValue="1.17", newValue=1.56}
progresschanging Object { oldValue="1.56", newValue=1.95}
progresschanging Object { oldValue="1.95", newValue=2.34}
progresschanging Object { oldValue="2.34", newValue=2.73}
progresschanging Object { oldValue="2.73", newValue=3.12}
progresschanging Object { oldValue="3.12", newValue=3.51}
progresschanging Object { oldValue="3.51", newValue=3.9}
progresschanging Object { oldValue="3.9", newValue=4.29}
progresschanging Object { oldValue="4.29", newValue=4.68}
progresschanging Object { oldValue="4.68", newValue=5.07}
progresschanged Object { oldValue="5", newValue=5}

アップデート

progressChanging イベント中に値を確認できますが、アニメーションの完了後にラベルを 5.07 ではなく 5 に表示する方法がわかりません。ここにライブの例があります

4

2 に答える 2

1

整数を表示したい場合は丸める必要があります JavaScript はすべてに浮動小数点数を使用します。
JavaScriptで浮動小数点数を整数に変換するにはどうすればよいですか?

--- 更新への対応 ---
その正確なプログレス バーについて詳しくは知りませんが、どれも似たようなものです。
何が起こっているのかというと、変数が更新されたときではなく、変数が初期化されたときにラウンドを 1 回呼び出しているということです。

進行状況バーに渡される前に、完了したカウントを丸めたい場所である、更新中の読み込みバーに関連付けられたイベントがあります。

何が起こっているのかをうまく説明できているかどうかわかりません
value = Math.round(myobj.completedCount), ---update event--> completedCount = newValue
---update event---> completedCount = newValue
その更新イベントをキャッチし、そこで変数を丸める必要があります。
---更新イベント--> completedCount = round(newValue)

------ これを試してください-------
問題の行は
percent = (value - self.min) / (self.max - self.min) * 100;
、wijmo バーのソース コードの 328 行を次の行に置き換えることです。これにより、希望どおり
percent = Math.round((value - self.min) / (self.max - self.min)) * 100;
に動作するはずです。

于 2011-08-23T11:58:55.613 に答える
0

最後にこれを使用しました（プログレスバーjsファイルの編集-yuck）：

self.label.html(self._getFormatString(
            o.labelFormatString, Math.round(percent), Math.round(curValue)));

また、wijmo 開発者にバグを記録しました。

ソースを編集しない別のオプションは次のとおりです。

(function(){
// Store a reference to the original html method.
var originalHtmlMethod = jQuery.fn.html;

// Define overriding method
jQuery.fn.html = function(){

// Execute our override - rounding the value
// being passed to jQuery's html() function
// only when the progressbar label is being
// updated
if ($(this).hasClass('ui-progressbar-label')) {
arguments[0] = Math.round(arguments[0]);
}

// Execute the original jquery method for all other html() calls on the     page
originalHtmlMethod.apply( this, arguments );
}
})();
于 2011-08-25T16:09:55.320 に答える