站长社区 _ SEO论坛 _ SEO优化

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 166|回复: 0
收起左侧

[html/html5] web图表开发工具制作双轴图

[复制链接]
gridf 发表于 2018-9-26 10:46:17 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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

2. 示例
2.1 准备数据
新建工作薄,添加数据集,SQL语句为SELECT 产品名称, 库存量, 订购量, 再订购量 FROM [产品] where 类别ID = 1,选出饮料类各产品的库存量、订购量与再订购量作为图表数据来源。
2.2 插入图表
以悬浮图表为例,点击插入>悬浮元素>插入图表,弹出图表向导对话框,选择组合图,点击确定。
2.3 设置图表数据
图表数据来源于数据集数据,设置如下:
此时分页预览,可以看到默认第二个系列为折线图且使用右侧坐标轴,其余系列都是柱状图,使用左侧坐标轴:
2.4 设置双轴属性-条件显示设置
而我们需要同类的订购量与再订购量使用柱形图且使用左侧坐标轴,而与他们比较的库存量使用折线图且使用右侧坐标轴。
选中图表,点击图表属性表-特效>条件显示,点击左边第一个条件,可以看到默认设置好了系列1(库存量)的样式为柱形图、使用主坐标轴(左侧坐标轴),修改其系列样式为折线图,坐标轴选择次坐标轴,标记类型修改为实心,如下图:
按照同样的方法,修改条件显示的第二个,设置系列2(再订购量)的样式为柱形图,使用主坐标轴;
再添加一个条件显示,设置系列3(库存量)的样式为柱形图,使用主坐标轴(右侧坐标轴);
更多系列按照同样的方法设置即可。
注:系列序号是按照设置图表数据时的系列顺序来编号的。
2.5 保存与预览
保存模板,点击分页预览,效果即如上。模板效果在线查看请点击DoubleFigure.cpt
已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\DoubleFigure.cpt。对话框, 库存量, 柱状图, 坐标轴, where
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|易采站长站 ( 蒙ICP备14002389-1号 ) |

GMT+8, 2020-5-27 04:24

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表