peity简单使用

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>

效果图：

更多详情请查看官网！