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

Question

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

等....

此滑块在范围内上升（ max将在$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://jsfiddle.net/3c4d7L53/3/尝试将值从xxxxx.xx更改为xxxxxx.xx，您会注意到字体减少自己。从这里开始，您可以根据使用基本数学显示的位数决定字体值。

代码本身如下。我保留了您重载的format函数并添加了change函数：

＆＃13;

＆＃13;

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

  }
});

＆＃13;

＆＃13;

＆＃13;