当我使用 justgage 插件动态创建仪表时,值不显示
Value is not show when I create a gauge dynamically with justgage plugin
我正在尝试动态添加仪表,实际上它可以工作,但没有达到预期的行为,显示了图形,但即使图形显示不是 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.");
}
});}
经过一番努力,我决定直接用javascript修改html代码。
在 for 中创建对象 (JustGage) 后,我访问了包含文本的 span 对象并修改了值
var list = document.getElementById(x);
var list2 = list.childNodes[0];
list2.childNodes[6].childNodes[0].innerHTML = approved;
我正在尝试动态添加仪表,实际上它可以工作,但没有达到预期的行为,显示了图形,但即使图形显示不是 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.");
}
});}
经过一番努力,我决定直接用javascript修改html代码。 在 for 中创建对象 (JustGage) 后,我访问了包含文本的 span 对象并修改了值
var list = document.getElementById(x);
var list2 = list.childNodes[0];
list2.childNodes[6].childNodes[0].innerHTML = approved;