Tôi đang sử dụng JQuery Knob để tạo một số biểu đồ thú vị và nó hoạt động hoàn hảo. Nhưng tôi có một vấn đề: Tôi muốn làm cho số hiển thị giữa biểu đồ có một biểu tượng '%' được ghép nối. nhưng tôi không thể làm cho nó hoạt động được. Sửa đổi đầu vào thông qua jquery wont làm điều đó, và tôi đã cố gắng đọc vào mã của thư viện nhưng không có may mắn. Có ai khác đã có vấn đề này trước khi?Thay đổi số hiển thị JQuery Knob
Nếu bạn xem nhanh về repo github bạn sẽ thấy có móc vẽ được gọi là mọi lúc canvas được vẽ. Nếu bạn thực hiện móc đó bạn sẽ có thể thêm bất cứ điều gì bạn muốn đầu vào. Dưới đây là một ví dụ ngắn các chức năng bạn đang tìm kiếm (để thử nó: http://jsfiddle.net/eAQA2/) và để tham khảo trong tương lai:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<script>
$(function() {
$(".dial").knob({
'draw' : function() {
$(this.i).val(this.cv + '%')
}
})
})
</script>
</head>
<body>
<input type="text" class="dial" data-min="0" data-max="100">
</body>
</html>
tôi quản lý để đạt được điều này với hình ảnh động quá:
giải pháp của tôi thực hiện điều này bằng cách thêm tỷ lệ phần trăm mỗi lần giá trị được tăng:
$(function() {
$('.dial_overall').each(function() {
var $this = $(this);
var myVal = $this.attr("value");
$this.knob({
});
$({
value: 0
}).animate({
value: myVal
}, {
duration: 1600,
easing: 'swing',
step: function() {
$this.val(Math.ceil(this.value)).trigger('change');
$('.dial_overall').val($('.dial_overall').val() + '%');
}
})
});
});
Tính đến phiên bản 1.2.7 hiện nay là một cái móc format để thực hiện nhiệm vụ như thế này:
$(".dial").knob({
'format' : function (value) {
return value + '%';
}
});
Bạn có thể cho biết những gì bạn đã thử không? Nó sẽ có lợi cho bất cứ ai cố gắng giúp bạn. – Erik
Thay đổi bằng JQuery giá trị của đầu vào mà tôi đã sử dụng cho biểu đồ sau khi nó được tạo, thêm '%' vào cuối, nhưng điều đó không làm được. Đang cố gắng thay đổi giá trị theo cách thủ công bằng cách sử dụng firebug để kiểm tra, nhưng điều đó cũng không làm. Tôi đã mở mã nguồn núm, nhưng họ làm việc với rất nhiều html5 mà tôi thiếu kiến thức, cố gắng để thêm '%' trong một số giá trị mà không thành công ... –