easypiechart 使用

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>