Html5图表工具FineReport：[14]双轴图

来源：互联网 2023-03-16 19:06:43 225

多种图表类型，可在一张图表混合显示。如图表中既存在柱形图，又有折线图或面积图，且各图表类型的纵坐标轴可设置在左或右，实现混合图表。如下图效果：

工具/原料

准备数据

新建工作薄，添加数据集，SQL语句为SELECT 产品名称, 库存量, 订购量, 再订购量 FROM [产品] where 类别ID = 1，选出饮料类各产品的库存量、订购量与再订购量作为图表数据来源。

插入图表

以悬浮图表为例，点击插入>悬浮元素>插入图表，弹出图表向导对话框，选择组合图，点击确定。

设置图表数据

图表数据来源于数据集数据，设置如下：

此时分页预览，可以看到默认第二个系列为折线图且使用右侧坐标轴，其余系列都是柱状图，使用左侧坐标轴：

Html5图表工具FineReport：[14]双轴图

3相关内容未经授权抓取自百度经验

设置双轴属性-条件显示设置

而我们需要同类的订购量与再订购量使用柱形图且使用左侧坐标轴，而与他们比较的库存量使用折线图且使用右侧坐标轴。

选中图表，点击图表属性表-特效>条件显示，点击左边第一个条件，可以看到默认设置好了系列1（库存量）的样式为柱形图、使用主坐标轴（左侧坐标轴），修改其系列样式为折线图，坐标轴选择次坐标轴，标记类型修改为实心，如下图：

按照同样的方法，修改条件显示的第二个，设置系列2（再订购量）的样式为柱形图，使用主坐标轴；

再添加一个条件显示，设置系列3（库存量）的样式为柱形图，使用主坐标轴（右侧坐标轴）；

更多系列按照同样的方法设置即可。

注：系列序号是按照设置图表数据时的系列顺序来编号的。

Html5图表工具FineReport：[14]双轴图

保存与预览

保存模板，点击分页预览，效果即如上。模板效果在线查看请点击DoubleFigure.cpt

已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\DoubleFigure.cpt。

散点图|下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML