我爱模板网 > 特效插件 > 统计图表 >  jQuery easypiechart饼状图插件使用方法正文

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>


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:jquery.flot.js图表插件使用 下一篇:Chart.js图表插件详解
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢