Как отобразить значение на графике ручки, используя jquery?

Question

1. Как отобразить значение, полученное из какого-либо URL, используя jQuery Диаграмма регулятора в Bootstrap 4. Я получил значение «NaN». (Пожалуйста, используйте код ниже)
2. Как отобразить символ "-" da sh, если данные нулевые. (Пожалуйста, используйте код ниже)

HTML

<input type="text" class="knob" id="avg_temperature" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>

JS

$.ajax({
    url : XXX,
    type : 'POST',
    dataType : 'json',
    cache: false,
    async: false,
    dataSrc : 'data',
    contentType: false,
    processData: true,
    success: function(response){
        if (response.status == "Success"){            
            if (response.data[0]["avg_temperature"] == null){
                response.data[0]["avg_temperature"] = "-";
                $("#avg_temperature").text("-");
            }
            $("#avg_temperature").text(response.data[0]["avg_temperature"]);

            var colors = ['#11E117', '#FFC300', '#C00']

            //knob chart for temperature
            $('#avg_temperature').knob();
            $('#avg_temperature').attr('data-fgColor', '#11E117');

            $({animatedVal: 0}).animate({animatedVal: response},{
                duration: 3000,
                easing: "swing",
                async: false,
                step: function() {
                    var val = Math.ceil(this.animatedVal);
                    $("#avg_temperature").trigger('configure', {
                        'fgColor': colors[(val < 40) ? 0 : (val < 70) ? 1 : 2]
                    }).val(val).trigger("change");
                    var newVal = val + String.fromCharCode(176) + 'C'; $('#avg_temperature').val(newVal);
                }
            });
        }
    },
});

Answer 1

Из контекста вашего кода кажется, что response является объектом, и это является причиной проблемы, поскольку animate() ожидает, что значение, которое вы предоставляете, является целым числом.

Из контекста вашего использования response в другом месте кода, похоже, вам нужно получить доступ к указанному свойству c temperature из него, например:

if (response.data[0]["avg_temperature"] == null)
    response.data[0]["avg_temperature"] = "-";

var colors = ['#11E117', '#FFC300', '#C00']

let $avgTemp = $("#avg_temperature").text(response.data[0]["avg_temperature"]);
$avgTemp.data('fgColor', '#11E117').knob();

$({
  animatedVal: 0
}).animate({
  animatedVal: parseInt(response.data[0]["avg_temperature"], 10) // update here
}, {
  duration: 3000,
  easing: "swing",
  step: function() {
    var val = Math.ceil(this.animatedVal);
    $avgTemp.trigger('configure', {
      'fgColor': colors[(val < 40) ? 0 : (val < 70) ? 1 : 2]
    }).val(val).trigger("change");

    var newVal = val + String.fromCharCode(176) + 'C';
    $avgTemp.val(newVal);
  }
});

Также обратите внимание на удаление async: false , Это плохая практика, и она тебе здесь все равно не нужна