Peity图表使用记录
官方地址:Peity官网
此图表插件支持浏览器:Chrome, Firefox, IE9+, Opera, Safari.
支持图形:Pie Charts、Donut Charts、Line Charts、Bar Charts
Pie Charts
HTML代码:
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span>
js代码:
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.peity.min.js"></script>
<script>
$("span.pie").peity("pie")
</script>
效果图:
Donut Charts
HTML代码:
<span class="donut">1/5</span>
<span class="donut">226/360</span>
<span class="donut">0.52/1.561</span>
<span class="donut">1,4</span>
<span class="donut">226,134</span>
<span class="donut">0.52,1.041</span>
<span class="donut">1,2,3,2,2</span>
js代码:
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.peity.min.js"></script>
<script>
$('.donut').peity('donut')
</script>
效果图:
Line Charts
HTML代码:
<span class="line">5,3,9,6,5,9,7,3,5,2</span>
<span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
js代码:
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.peity.min.js"></script>
<script>
$(".line").peity("line")
</script>
效果图:
Bar Charts
HTML代码:
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
<span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
js代码:
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.peity.min.js"></script>
<script>
$(".bar").peity("bar")
</script>
效果图:
更多详情请查看官网!