格式化值标签以适合而不被切断

Question

我遇到一个问题，其中我会自动格式化jQuery.Knob实例，并且该实例被错误地切断。 最终看起来像这样：

等等....

该滑块只是在范围内上升（ 最大值将在$10,000,000附近，可能还会更多 ），因此您可以理解，显示值的很大一部分会随着它的增长而被截断，这不是我想要的...。

我设法通过使用以下方法重载draw方法来抵消这种情况，但是随着字体大小的增加，这并不是完全可靠的方法：

$(this.i).css('font-size', '90%').val('$' + parseFloat(this.cv, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

但是，我想要一种更清洁的方法，而不必将自己的CSS应用于呈现的标签。

我确实尝试了以下format ，但是它超载了：

format: function (value) {
    return '$' + parseFloat(value, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
},

DEMO

---

^{我正在使用Bootstrap进行任何操作，并且此容器的HTML如下所示：}

<div class='row margin-top-45'>
    <div class='col-lg-4'>
        <input value="50000" class="dial" data-step="5000" data-min="0" data-max="10000000" data-thickness="0.2" data-fgColor="#16A085" data-skin="tron">
    </div>
</div>

Answer 1

这是我决定采用此解决方案时动态更改字体的示例： https : xxxxx.xx尝试将值从xxxxx.xx为xxxxxx.xx ，您会注意到字体会减少。 从这里，您可以根据必须使用基本数学显示的位数确定字体值。

代码本身在下面。 我保留了重载的format功能并添加了change功能：

 jQuery('.dial').knob({ format: function(e) { return '$' + parseFloat(e, 10).toFixed(2).replace(/(\\d)(?=(\\d{3})+\\.)/g, "$1,") }, change: function(v) { var v = parseInt(v); var valLength = String(v).length; var defaultFontSize = 22; if (valLength > 5) { var defaultFontSize = 22 - ((valLength - 5) * 4); this.i.css({ font: 'bold ' + defaultFontSize + 'px Arial' }); } else { this.i.css({ font: 'bold ' + defaultFontSize + 'px Arial' }); } } });