jQuery easypiechart饼状图插件使用方法

此插件主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等，功能很强大，带有HTML5的动画效果，效果非常炫，看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图：


1导入需要文件

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="html5.js"></script><!-- easypiechart 兼容html5 not is必须的 -->
<script type="text/javascript" src="excanvas.js"></script><!-- easypiechart 兼容ie8 not is 必须的-->
<script type="text/javascript" src="jquery.easy-pie-chart.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.easy-pie-chart.css" media="screen">

2js创建chart

var initPieChart = function() {
    $('.percentage').easyPieChart({
        animate: 1000
    });
    $('.percentage-light').easyPieChart({
        barColor: function(percent) {
            percent /= 100;
            return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
        },
        trackColor: '#666',
        scaleColor: false,
        lineCap: 'butt',
        lineWidth: 15,
        animate: 1000
    });

    $('.updateEasyPieChart').on('click', function(e) {
      e.preventDefault();
      $('.percentage, .percentage-light').each(function() {
        var newValue = Math.round(100*Math.random());
        $(this).data('easyPieChart').update(newValue);
        $('span', this).text(newValue);
      });
    });
};

3.html

<div class="container">
    <h1>EASY饼图</h1>
    <div class="chart">
        <div class="percentage" data-percent="55"><span>55</span>%</div>
        <div class="label">新的访问</div>
    </div>
    <div class="chart">
        <div class="percentage" data-percent="46"><span>46</span>%</div>
        <div class="label">跳出率</div>
    </div>
    <div class="chart">
        <div class="percentage" data-percent="92"><span>92</span>%</div>
        <div class="label">服务器负载</div>
    </div>
    <div class="chart">
        <div class="percentage" data-percent="84"><span>752</span>MB</div>
        <div class="label">使用的RAM</div>
    </div>
    <div style="clear:both;"></div>
    <div class="dark">
        <div class="chart">
            <div class="percentage-light" data-percent="55"><span>55</span>%</div>
            <div class="label">新的访问</div>
        </div>
        <div class="chart">
            <div class="percentage-light" data-percent="46"><span>46</span>%</div>
            <div class="label">跳出率</div>
        </div>
        <div class="chart">
            <div class="percentage-light" data-percent="92"><span>92</span>%</div>
            <div class="label">服务器负载</div>
        </div>
        <div class="chart">
            <div class="percentage-light" data-percent="84"><span>752</span>MB</div>
            <div class="label">使用的RAM</div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <p><a href="#" class="button updateEasyPieChart">更新饼图</a></p>
</div>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！