如何將數據庫中的動態值加載到jQuery圖表

Question

我想知道如何將動態加載的值替換爲設置值？

該圓形圖示例中的值從div的data-percent="value"中加載。但是，這不能從數據庫動態加載。

有誰知道我該如何修改這個圓形圖表以允許從數據庫中輸入值而不是？

供參考：圓圖未顯示在這裏摘錄一些原因：/所以這裏是一個例子的鏈接： http://www.jqueryscript.net/demo/Smooth-Circle-Chart-Plugin-with-jQuery-CSS3-Circle-Charts/

感謝。

(function($) { 
 
    $.fn.extend({ 
 
    //pass the options variable to the function 
 
    percentcircle: function(options) { 
 
     //Set the default values, use comma to separate the settings, example: 
 
     var defaults = { 
 
      animate: true, 
 
      diameter: 210, 
 
      guage: 10, 
 
      coverBg: '#fff', 
 
      bgColor: '#efefef', 
 
      fillColor: '#5c93c8', 
 
      percentSize: '15px', 
 
      percentWeight: 'normal' 
 
     }, 
 
     styles = { 
 
      cirContainer: { 
 
      'width': defaults.diameter, 
 
      'height': defaults.diameter 
 
      }, 
 
      cir: { 
 
      'position': 'relative', 
 
      'text-align': 'center', 
 
      'width': defaults.diameter, 
 
      'height': defaults.diameter, 
 
      'border-radius': '100%', 
 
      'background-color': defaults.bgColor, 
 
      'background-image': 'linear-gradient(91deg, transparent 50%, ' + defaults.bgColor + ' 50%), linear-gradient(90deg, ' + defaults.bgColor + ' 50%, transparent 50%)' 
 
      }, 
 
      cirCover: { 
 
      'position': 'relative', 
 
      'top': defaults.guage, 
 
      'left': defaults.guage, 
 
      'text-align': 'center', 
 
      'width': defaults.diameter - (defaults.guage * 2), 
 
      'height': defaults.diameter - (defaults.guage * 2), 
 
      'border-radius': '100%', 
 
      'background-color': defaults.coverBg 
 
      }, 
 
      percent: { 
 
      'display': 'block', 
 
      'width': defaults.diameter, 
 
      'height': defaults.diameter, 
 
      'line-height': defaults.diameter + 'px', 
 
      'vertical-align': 'middle', 
 
      'font-size': defaults.percentSize, 
 
      'font-weight': defaults.percentWeight, 
 
      'color': defaults.fillColor 
 
      } 
 
     }; 
 

 
     var that = this, 
 
     template = '<div><div class="ab"><div class="cir"><span class="perc">{{percentage}}</span></div></div></div>', 
 
     options = $.extend(defaults, options) 
 

 
     function init() { 
 
     that.each(function() { 
 
      var $this = $(this), 
 
      //we need to check for a percent otherwise set to 0; 
 
      perc = Math.round($this.data('percent')), //get the percentage from the element 
 
      deg = perc * 3.6, 
 
      stop = options.animate ? 0 : deg, 
 
      $chart = $(template.replace('{{percentage}}', perc + '%')); 
 
      //set all of the css properties forthe chart 
 
      $chart.css(styles.cirContainer).find('.ab').css(styles.cir).find('.cir').css(styles.cirCover).find('.perc').css(styles.percent); 
 

 
      $this.append($chart); //add the chart back to the target element 
 
      setTimeout(function() { 
 
      animateChart(deg, parseInt(stop), $chart.find('.ab')); //both values set to the same value to keep the function from looping and animating \t 
 
      }, 250) 
 
     }); 
 
     } 
 

 
     var animateChart = function(stop, curr, $elm) { 
 
     var deg = curr; 
 
     if (curr <= stop) { 
 
      if (deg >= 180) { 
 
      $elm.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, ' + options.fillColor + ' 50%),linear-gradient(90deg, ' + options.fillColor + ' 50%, transparent 50%)'); 
 
      } else { 
 
      $elm.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, ' + options.bgColor + ' 50%),linear-gradient(90deg, ' + options.fillColor + ' 50%, transparent 50%)'); 
 
      } 
 
      curr++; 
 
      setTimeout(function() { 
 
      animateChart(stop, curr, $elm); 
 
      }, 1); 
 
     } 
 
     }; 
 

 
     init(); //kick off the goodness 
 
    } 
 
    }); 
 

 
})(jQuery);

.circleme { 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circleme" data-percent="68">68%</div>

Answer 1

而不是從一個div得到這個值，該值設置爲您作爲參數傳遞，當你調用該函數的變量。 要進行測試，請嘗試將其設置爲硬編碼值。

`PERC = Math.round（$ this.data（ '百分比'））

使用此

perc = 60;