在jquery旋钮输入值中添加旋钮标签（不要求百分比）答案

【问题标题】：Adding knob LABEL inside jquery knob input value(not asking for percentage)在jquery旋钮输入值中添加旋钮标签（不要求百分比）
【发布时间】：2017-11-15 02:55:16
【问题描述】：

我正在使用名为 Jquery Knob 的 jQuery 插件来创建循环进度图表。我已经实现了显示价值和百分比，但我也想在旋钮本身内显示一个标签。这就是我所实现的：without label 这就是我想要实现的目标：with label

我使用了以下代码，但不知道如何将下一行的文本添加到百分比值（旋钮内）

link: function(scope, element, attrs) {

        $(element).knob({
            'format': function(value) {
                return value + '%';
            }
        });
}

我尝试添加像

这样的换行符

return value + "%\nlabel"

但它不起作用并且在同一行。

【问题讨论】：

标签： javascript jquery jquery-knob

【解决方案1】：

我已经通过使用jQuery roundSlider 实现了您的要求。查看以下演示：

`DEMO`

【讨论】：

是的，还有许多其他插件可以轻松完成，但我想使用 jquery Knob 来完成。
您的示例是否有 jsFiddle，以便我可以尝试通过该演示中的旋钮实现要求。或者你有什么特别的理由需要单独使用旋钮？

【解决方案2】：

我想我已经找到了答案。如果你阅读文档，jQuery 旋钮有 draw 方法。 jQuery 旋钮使用画布制作圆圈，因此您只需将画布文本添加到画布上下文中。这应该是符合您需要的答案：

$(element).knob({
   'format': function(value) {
      return value + '%';
   },
   'draw': function() {
      this.g.fillText('label', x, y)
   }
});

将 x 和 y 变量调整到你将放置标签的点例如。如果你想让它低于旋钮值，你应该把 y >= 旋钮高度的 1/2。

【讨论】：