2017-06-15 1 views
0

ゲージを動的に追加しようとしていますが、実際には動作しますが、期待された動作では機能しません。グラフは表示されますが、 0ではない、私のゲージはonclickイベントで表示され、divとゲージはajaxリクエストで作成されます。私はJavaScriptで直接HTMLコードを変更することにした多くの労力後justgageプラグインでゲージを動的に作成すると値が表示されない

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

答えて

0

。 for(JustGage)を作成した後、テキストを含むspanオブジェクトにアクセスして値を変更しました。

var list = document.getElementById(x); 
var list2 = list.childNodes[0]; 
list2.childNodes[6].childNodes[0].innerHTML = approved; 
関連する問題