如何将动态值从数据库加载到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	
          }, 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（'percent'））

使用

perc = 60;