Question

目前，我是作为门户网站使用，在达到70％的利用率时，图表不会更改颜色。

不幸的是，我尝试应用“如果”陈述式无法反映在我的图表中。

<div class="progress-box text-center">
  <input type="text" class="knob dial1" value="66" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="" readonly>
  <h5 class="text-blue padding-top-10 weight-500">Central</h5>
</div>

$('.dial1').attr('data-fgColor', '#11E117');
$(".dial1").knob();

$({
  animatedVal: 0
}).animate({
  animatedVal: 66
}, {
  duration: 3000,
  easing: "swing",
  step: function() {
    $(".dial1").val(Math.ceil(this.animatedVal)).trigger("change");
  }
});

如果利用率达到70％，则图表可以将颜色更改为红色。

Answer 1

要动态更改颜色，可以使用旋钮库的configure事件，可以在动画的每个步骤中调用该事件。

请注意，在此示例中，我将值修改为100，以显示所有的色阶。

$('.dial1').knob();
var colors = ['#11E117', '#CC0', '#C00']

$({
  animatedVal: 0
}).animate({
  animatedVal: 100
}, {
  duration: 3000,
  easing: "swing",
  step: function() {
    var val = Math.ceil(this.animatedVal);
    $(".dial1").trigger('configure', {
      'fgColor': colors[(val < 70) ? 0 : (val < 90) ? 1 : 2]
    }).val(val).trigger("change");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
<div class="progress-box text-center">
  <input type="text" class="knob dial1" value="66" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="" readonly>
  <h5 class="text-blue padding-top-10 weight-500">Central</h5>
</div>

Answer 2

.dial1是一个CSS类，因此它没有data-fgColor属性。

如果要更改data-fgColor，则需要在输入标签中分配一个ID。

那么您可以做：

$('#inputId').attr('data-fgColor', '#11E117');

Answer 3

很难告诉您要做什么，所以我只是假设您要在“ .dial1”的值等于或大于70时更改颜色？

$(".dial1").on("change", function (){
    if($(this).val() >= 70){
        $(".progress-box").css({"background-color":"red"});
    }
    else{
        $(".progress-box").css({"background-color":"blue"});
    }
})

Answer 4

$('any_selector').attr('any_attribute','any_value');

尝试一下！

使用JQuery更改颜色

4 个答案: