html5柱状图：插件之负数柱形图

工具/原料

html5软件：FineReport7.1.1

大小：148.2M 适用平台：windows

1.问题描述

当数据出现负数时,图表中就需要对应表示出负数的部分,6.5.5版本的图表已经支持显示负数,但是无法明确以0刻度为分界,在7.0版本中对该功能又进一步的进行了优化。

效果如下:

2.示例

2.1准备数据

新建工作薄,添加数据集,SQL语句为SELECT 产品名称, 库存量, (订购量+再订购量) as 订购总量 FROM [产品] where 类别ID = 1,

查询出饮料类产品的库存量与订购总量。

如下图制作报表,统计出各产品的库存量与订购总量,并使用公式计算出剩余库存量,以此作为图表数据,使用统计图直观地查看出哪些产品需要补货:

2.2负数柱形图设计

普通柱形图就支持显示负数,以悬浮图表为例,在菜单栏里点击插入>悬浮元素>插入图表,

弹出图表向导对话框,选择柱形图,点击确定,

图表数据源设置,

如下:

2.3保存与预览

保存模板,点击分页预览,效果即如上。

模板效果在线查看请点击Negative.cpt

已完成模板可参考%FR_HOME%WebReportWEB-INFeportletsdocAdvancedChartNegative.cpt。