javascript - 当我使用 justgage 插件动态创建仪表时,不显示值

标签 javascript jquery ajax gauge justgage

我正在尝试动态添加仪表,实际上它可以工作,但不符合预期的行为,显示了图形,但值是 0,即使图形显示不为 0,我的仪表将显示在 onclick 事件中div 和仪表是在 ajax 请求中创建的。

function getLocationsGauge(row, countryId) {
var chartsDataTemp;
var requestData = {
    countryId: $("#hCountryName" + countryId).val()
};
$("div").removeClass("blurELearning");
$("#gg" + countryId).addClass("blurELearning");

$.ajax({
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json',
    url: '../XXX/GetLocations',
    async: false,
    data: requestData,
    success: function (chartsdata) {
        chartsDataTemp = chartsdata;
        $(".location").remove();
        $("#divLocations").remove();
        var count = chartsdata.length / 6;
        $('#countryGraphs  section:eq(' + (row) + ')').after('<div id="divLocations" class="card card-info"><div class="card-header"><strong class="header-block">' + $("#hCountryName" + countryId).val() + '</strong></div></div>');
        for (var i = 0; i <= count; i++) {
            $('#divLocations').append('<section id="location' + i + '" class="section location"><div id="rowLocation' + i + '" class="row"></div></section>');
            for (var j = i * 6; j < (i + 1) * 6; j++) {
                $('#rowLocation' + i).append('<div class="col-md-2"><div id= "ggLocation' + (j + 1) + '" ></div ></div >');
            }
        }

        for (var i = 0; i < chartsdata.length; i++) {

            var limit = Number(chartsdata[i].total) * 0.8;
            var total = Number(chartsdata[i].total);
            var approved = Number(chartsdata[i].approved);
            var name = chartsdata[i].location;
            var percentage = approved * 100 / total;
            percentage = parseFloat(Math.round(percentage * 100) / 100).toFixed(2)
            var x = "ggLocation" + (i + 1);
            objectsLocation[i] = new JustGage({
                id: x,
                value: approved,
                min: 0,
                max: total,
                gaugeWidthScale: 1,
                counter: true,
                hideInnerShadow: true,
                title: name + ' ' + percentage + '%',
                label: "approved",
                levelColors: ["#a9d70b", "#ffd6b6", "#fe9e50"],
                levelColorsGradient: true,
                pointer: true,
                pointerOptions: {
                    toplength: 1,
                    bottomlength: -40,
                    bottomwidth: 6,
                    color: '#8e8e93'
                }
            });

        }


    },
    complete: function () {

    },
    error: function () {
        alert("Error loading data for location! Please try again.");
    }
});}

Graph result

最佳答案

经过一番努力我决定直接用javascript修改html代码。 在for中创建对象(JustGage)后,我访问了包含文本并修改了值的span对象

var list = document.getElementById(x);   
var list2 = list.childNodes[0];
list2.childNodes[6].childNodes[0].innerHTML = approved;

关于javascript - 当我使用 justgage 插件动态创建仪表时,不显示值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44572425/

相关文章:

javascript - 如何禁用带有单选按钮的组合框(javascript)

jquery - 使用 jquery 或 css 删除字符串

php - 通过 PHP 返回图像并使用 AJAX 设置为 src

asp.net - 被 CORS 政策阻止 : Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response

Javascript - 根据条件查找矩阵中的第一个索引

javascript - javascript 和 plsql 任务之间动态操作的交互

计算不同变量平均值时的 JavaScript 错误

javascript - 使用 jQuery 包装元素组

jquery - Bootstrap 同位素和延迟加载通过 json 获取/加载图像

php - wordpress 中的 AJAX 和 PHP 循环进度