下面是详细的攻略：
jQuery简单图表peity.js使用示例
什么是peity.js
Peity是一个简单的jQuery插件，可以在HTML文档中轻松地添加迷你统计图和简单图表。Peity使用canvas和SVG绘制这些图表，因此它非常快。
peity.js的特性
- 支持Bar、Line和Pie三种图表类型。
- 核心代码只有202行，轻量级易维护。
- 可定制化程度高，可自定义颜色，大小，间距等各种样式。
peity.js的使用
- 引入peity.js文件
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/peity/3.3.0/jquery.peity.min.js"></script>
</head>
- 创建一个DOM来放置图表
<div id="chart"></div>
- 调用Peity提供的API，生成图表
$(function(){
$("#chart").peity("pie", {
fill: ["#ff9900", "#fff4dd", "#ffc000"]
});
});
以上代码就可以在#chart的div中生成一个简单的饼图，其中选择了"pie"图表类型，并自定义了饼图三个部分的填充颜色。
实例1：生成一个折线图
- 为数据编写HTML结构
<div>
<span class="line" id="linechart">5,3,2,4,7,6,8,9,4,1</span>
</div>
- 添加JavaScript代码
$(function(){
$(".line").peity("line");
});
以上代码就可以在#linechart的span中生成一个简单的折线图。
实例2：生成多个类型的图表
- 为数据编写HTML结构
<div>
<span class="pie">1/5</span>
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
<span class="line">5,3,2,4,7,6,8,9,4,1</span>
</div>
- 添加JavaScript代码
$(function(){
$(".pie").peity("pie", {
fill: ["#ff9900", "#fff4dd"]
});
$(".bar").peity("bar", {
fill: ["#ff9900"]
});
$(".line").peity("line");
});
以上代码就可以在三个span中分别生成不同类型的图表，其中饼图和条形图自定义了颜色的填充，折线图则使用了默认样式。
总结
通过本文的介绍，我们可以轻松使用Peity.js快速搭建简洁的图表，其可定制化程度较高，可满足大多数简单图表的需求。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery简单图表peity.js使用示例 - Python技术站
微信扫一扫 
支付宝扫一扫 