`
iris_1992
  • 浏览: 25418 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

web表格插件制作气泡图

阅读更多

工具/原料

  • web表格插件:FineReport7.1.1
  • 大小:148.2M 适用平台:windows/linux
1. 概述
气泡图,是散点图的变体,不同的是,散点图使用的是成组的X、Y值(二维),而气泡图使用的是成组的X、Y、Z值(三维),其Z值确定气泡的大小。
如下气泡图来监视各调味品的单价、成本与库存订购量差:
2. 示例
2.1 数据准备
新建工作薄,添加数据集ds1,SQL语句为select 产品名称,成本价,单价,(库存量-订购量) as 库存订购量差 from 产品 where 类别ID = 2
查询出各调味品的成本、单价、库存量与订购量的差,来制作一张气泡图监控调味品这三个维度的值,其中库存量与订购量的差确定气泡大小。
2.2 插入图表
以悬浮图表为例,点击插入>悬浮元素>插入图表,选择气泡图,点击确定。
2.3 图表数据设置
图表数据来源于数据集数据,气泡图固定有3个系列,分别表示x轴、y轴与气泡的大小,如下图:
点击完成,分页预览效果如下:
可以看到,默认的气泡图不美观,看不出每个气泡代表什么,有的气泡太小看不清楚等等。我们可以调整气泡的系列样式,来实现一张精美的气泡图。
2.4 气泡图系列设置
选中气泡图,点击图表属性表-样式>系列,如下图:
  • 大小表示
即气泡图大小表示的意思,分为两种,面积或者宽度,计算单位为像素。
原理是设置将气泡大小缩放为如50,则整个气泡图中最大的气泡半径为50像素,然后根据选择的大小比较方式如选择气泡面积,则按照气泡的面积比例调整其他气泡的大小。
  • 显示
显示负气泡:若系列3(z轴)有负值的话,勾选此选项负气泡会显示成为灰色,若不勾选此选项则负气泡不会显示,如上面效果图中所示辣椒粉,番茄酱和肉松都是灰色的,即负值。
  • 其他系列设置
其他系列设置与其他图表设置相同,如显示标签、添加警戒线等。
2.5 保存与预览
保存模板,点击分页预览即可查看效果。模板效果在线查看请点击Bubble.cpt
已完整模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Bubble.cpt
分享到:
评论

相关推荐

    Axure交互原型Web组件库 完整版v1.rp

    图片元素 图标元素 文本卡片 图文卡片 内容布局 Layout 纯文本内容块 图文混合内容块 大图标文本内容块 小图标文本内容块 图文卡片内容块 色块卡片内容块 按纽 Buttons 常用按纽 按纽尺寸...

    jQuery插件HighCharts实现气泡图效果示例【附demo源码】

    对于希望进一步学习和使用jQuery的开发者而言,文中提到的《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及...

    javascript统计表格插件 Highcharts提供直观的交互式的图表.zip

    它支持多种图表类型,包括折线图、柱状图、饼图、散点图(气泡图)、面积图等,使得数据可视化变得简单而高效。在网页开发中,Highcharts是一个常用的选择,尤其适用于数据分析和报告展示。 首先,Highcharts的核心...

    jquer实例大全【清晰版】

    jQuery表格拖动排序插件TableDnD jQuery常用网站商品分类筛选功能 jquery-弹出表单录入商品信息 jQuery弹出层插件popupWindow.js jQuery调色板变换背景 jQuery调用百度地图坐标定位 jquery多功能表单验证2.0(原创) ...

    jquery插件库合集

    pui 是一款基于jQyery开发的插件库。目前线上稳定使用已有2年多,丰富的接口,简单明了的调用方式... 插件库封装了布局、表单元素、表单校验、弹窗、toast、气泡pop、tab切换、日历时间、分页、表格、树、css命名等功能

    功能强大的jquery插件

    jqGrid是一款功能全面的jQuery表格插件,特别适合处理大量数据的展示和管理。它支持AJAX异步加载数据,具备排序、筛选、分页等功能,能够实现对表格数据的高效操作。此外,jqGrid还支持JSON和XML等多种数据格式,...

    5个最顶级jQuery图表类库插件【jquery插件库】

    它专注于用颜色、柱状图和气泡来有效地展示数据,提供丰富的选项,如数据清除器、油漆工具(支持填充、柱状和气泡图)、小数点配置(支持句号或逗号)以及自定义颜色表和CSS类。整个插件只有4kb,具有良好的可扩展性...

    按键精灵 v2014.05.16868官方版.zip

    |-- 新增 图像插件找图、找多图、图片中找图和找字等命令 |-- 新增 系统增强版插件变速、设置系统环境、获取硬件信息和解压缩等命令 |-- 新增 窗口插件设置或获取父窗口句柄、设置窗口为椭圆或多边形命令 |-- ...

    锐浪报表Grid++Report5.3

    6、提供图表功能,包括:饼图、叠加饼图、柱状图、气泡图、折线图、曲线图、散列点图等,支持三维图形。 7、报表数据导出格式丰富,格式包括:Excel、RTF、PDF、图像、HTML、文本,CSV 等。 8、支持数十种一维条码,...

    50款非常棒的 jQuery 插件分享

    33. Query Grid 3.1:高级表格插件,支持排序、过滤和分页。 34. JPhotoGrid:创建网格化的图片展示,适用于摄影网站或画廊。 35. Sort & Vote:实现投票和排序功能,如热门列表或用户评价。 36. MaxImage:背景图像...

    Xcelsius_培训教程

    - **气泡图**:用于显示三个维度的数据,通常用于表示关系的强度。 - **XY散点图**:适合于展示两个变量之间的关系。 - **面积图**:与折线图类似,但在下方填充颜色,突出趋势的变化。 - **雷达图和填充式雷达...

    Grid++Report6 报表开发者安装包

    6、提供图表功能,包括:饼图、叠加饼图、柱状图、气泡图、折线图、曲线图、散列点图等,支持三维图形。 7、报表数据导出格式丰富,格式包括:Excel、RTF、PDF、图像、HTML、文本,CSV 等。 8、支持数十种一维条码,...

    JSGrid甘特图代码

    添加必要的交互元素,如工具提示显示详细任务信息,或者使用气泡图显示任务间的依赖关系。此外,提供明确的用户反馈,如操作成功或失败的消息提示。 8. **性能优化** 对于大量任务的甘特图,注意性能优化,如分...

    Grid++Report5.6报表开发工具

    6、提供图表功能,包括:饼图、叠加饼图、柱状图、气泡图、折线图、曲线图、散列点图等,支持三维图形。 7、报表数据导出格式丰富,格式包括:Excel、RTF、PDF、图像、HTML、文本,CSV 等。 8、支持数十种一维条码,...

    Grid++Report5.5报表工具

    6、提供图表功能,包括:饼图、叠加饼图、柱状图、气泡图、折线图、曲线图、散列点图等,支持三维图形。 7、报表数据导出格式丰富,格式包括:Excel、RTF、PDF、图像、HTML、文本,CSV 等。 8、支持数十种一维条码,...

    Grid++Report5报表工具 版本5.5.0.8

    6、提供图表功能,包括:饼图、叠加饼图、柱状图、气泡图、折线图、曲线图、散列点图等,支持三维图形。 7、报表数据导出格式丰富,格式包括:Excel、RTF、PDF、图像、HTML、文本,CSV 等。 8、支持数十种一维条码,...

    Jquery Liger UI框架学习

    5. **插件化**:Liger UI的组件采用插件化设计,可以方便地扩展和维护。 6. **兼容性**:Liger UI兼容主流浏览器,包括Chrome、Firefox、Safari、IE8及以上版本,确保了广泛的应用场景。 **Liger UI组件详解** 1. ...

    LumWork扩展「LumWork Extension」-crx插件

    在LumWork中,您可以定义完成和验证工作流程,发送和跟踪通知,以几种布局(表格,地图,缩略图,日历)显示数据,冻结文档版本并查阅档案。使用LumWork,您可以根据为所有文档指定的元数据运行高效的查询,轻松访问...

    29这还是一个锦囊1

    5. **jHERE**:地图集成插件,利用Here Maps API,可以轻松在网站上添加交互式地图,支持自定义标记和信息气泡。 6. **JSON**:JavaScript Object Notation,是一种轻量级的数据交换格式,用于在网络中传递数据。...

Global site tag (gtag.js) - Google Analytics