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

Question

本例中的“value”为 5，“maxValue”为 39。进度条上显示的值 (a wijmo 进度条）是 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？ 这里有一个实例

Answer 1

如果你想显示整数，你需要四舍五入 JavaScript 对所有内容都使用浮点数。
如何转换浮点数JavaScript 中的整数？

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

有一个与正在更新的加载栏关联的事件，该事件是您想要对已完成的舍入进行舍入的位置在传递到进度条之前进行计数。

我不确定我是否很好地解释了发生的事情
value = Math.round(myobj.completedCount), ---update event--> CompletedCount = newValue
---更新事件---> 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; < br> 它应该按照您想要的方式运行。

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