Question

此示例中的

'value'为5，'maxValue'为39.进度条上显示的值（wijmo progressbar）为5.07。 {0}应该告诉进度条显示进度值而不是百分比。如果我将值更改为8，将最大值保持为39，则显示的值变为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而不是5.07？有一个实例here

Answer 1

如果要显示整数，则需要进行舍入JavaScript将JavaScript用于所有内容。
How do I convert a float number to a whole number in JavaScript?

---对更新的回应---
我对这个确切的进度条并不是特别熟悉，但它们都很相似。
发生的事情是，当变量初始化时，您正在调用一次，而不是在更新变量时调用。

有一个事件与正在更新的加载栏相关联，这是您想要的将完成的Count舍入到进度条之前。

我不确定我是否做得很好解释发生了什么事情。值= Math.round（myobj.completedCount），---更新事件 - ＆gt; completedCount = newValue
---更新事件---＆gt; completedCount = newValue你需要做的是捕获更新事件并在那里舍入变量。
---更新事件 - ＆gt; 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;
，它应该按照你想要的方式行事。

Answer 2

我最终选择了这个（编辑进度条js文件 - 哎呀）：

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

我还与wijmo开发者记录了一个bug。

不编辑源代码的另一个选项是：

(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 );
}
})();

为什么我的进度条显示浮点值？

2 个答案: