创建报表饼图而基于jquery.flot.js

最新推荐文章于 2025-06-03 12:14:42 发布

原创最新推荐文章于 2025-06-03 12:14:42 发布 · 995 阅读

0 ·

CC 4.0 BY-SA版权

软件爱好者专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何借助jQuery库中的flot.js插件创建饼图。首先引入了Bootstrap和jQuery的基础文件，接着导入了flot.js和flot.tooltip.js以实现饼图的展示和数据提示功能。在HTML中设置了饼图的容器，并通过JavaScript代码定义了数据系列，最后使用$.plot()函数绘制饼图，设置饼图显示和鼠标悬停时的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="${pageContext.request.contextPath}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>//这个是h5控制布局的一个基础表
<script src="${pageContext.request.contextPath}/js/usermang/mall/bower_components/jquery/dist/jquery.min.js"></script>

<script src="${pageContext.request.contextPath}/js/usermang/mall/bower_components/flot/jquery.flot.pie.js"></script>

<script src="${pageContext.request.contextPath}/js/usermang/mall/bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>

饼图的控件

<div class="panel-body">
<div class="flot-chart">
<div class="flot-chart-content" id="flot-pie-chart"></div>
</div>
</div>

//Flot Pie Chart
$(function() {

var data = [{
label: "Series 0",
data: 1
}, {
label: "Series 1",
data: 3
}, {
label: "Series 2",
data: 9
}, {
label: "Series 3",
data: 20
}];

var plotObj = $.plot($("#flot-pie-chart"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});

});