在v8系统中对比显示多个折线图_v8平台一个界面多个chart-优快云博客

本文链接：https://blog.youkuaiyun.com/fengjiexyb/article/details/78030541

如图所示，这是三个折线图，当鼠标放在某个图上时，三个图会同时显示相同横坐标的值。
这里写图片描述

seq := seq+10;
  insert into hbpageeleforsl (FPAGEID, FELEID, FELENME, FELENMC, FELECATBYSL, FPOSX, FPOSY, FWIDTH, FHEIGHT, FPROPERTY,
  FQRYURI, FVALFROM, FSAMESELECT, FIFNEEDLABEL, FSELECTVALCAT,
  FENABLEELES, FINVISIBLEELES, FOBJPROP)
values (pnm, seq, 'oiuytr1', '空气温度、湿度与发热人数对比分析图', 'lineChart', '-1', '-1', '-1', 225, '',
  '*q20170822xyb0002', '', '', 'N', 'N',
  '', '', '
  布局模式:[1]; 容器:[container.比较分析图];
  标题:[左间距=200,上间距=150,padding=5];
  横轴标签:[旋转=90,是否隐藏=是];
  纵轴标签:[旋转=0,名称=温{空格}{空格}{空格}{空格}{换行符}度{空格}{空格}{空格}{空格},标签名位置=left,内容={值}℃];
  图例:[是否隐藏=否,布局模式=水平,y=60,x=center];
  图例颜色:[#11abff];
  数据列名转换:[折线,日期,{"温度"}];
  边距:[60,60,90,10];
  关联:[group1];
  工具盒显示:[保存图片];
  轴缩放:[横坐标(开始=0,结束=100,y=-50)];
  图例:[是否隐藏=否,布局模式=水平,y=top,x=center];
  图例数据:[{"温度"}(type=line)、{"湿度"}(type=line)、{"发热人数"}(type=line)];
  图例颜色:[#11abff,#CC99CC,#33FF66];
  浮动显示:[function (params,ticket,callback) {
            console.log(params);
            for (var{空格}i = 0, l = params.length; i < l; i++) {
            var{空格}arr = new{空格}Array("周日","周一","周二","周三","周四","周五","周六");
            var{空格}res = new{空格}Date(params[i].name).getDay();
            return{空格}params[i].name+"{空格}"+arr[res]+"{换行符}温度："+params[i].value+"℃";
            }
            }
            ];

  ');

  seq := seq+10;
  insert into hbpageeleforsl (FPAGEID, FELEID, FELENME, FELENMC, FELECATBYSL, FPOSX, FPOSY, FWIDTH, FHEIGHT, FPROPERTY,
  FQRYURI, FVALFROM, FSAMESELECT, FIFNEEDLABEL, FSELECTVALCAT,
  FENABLEELES, FINVISIBLEELES, FOBJPROP)
values (pnm, seq, 'oiuytr2', '湿度时间分布', 'lineChart', '-1', '-1', '-1', 180, '',
  '*q20170822xyb0003', '', '', 'N', 'N',
  '', '', '布局模式:[1];容器:[container.比较分析图];
  横轴标签:[旋转=90,是否隐藏=是];
  纵轴标签:[旋转=0,名称=湿{空格}{空格}{空格}{空格}{换行符}度{空格}{空格}{空格}{空格},标签名位置=left,内容={值}%];
  图例:[是否隐藏=是,布局模式=水平];
  图例颜色:[#CC99CC];
  数据列名转换:[折线,日期,{"湿度"}];
  工具盒显示:[];
  隐藏标题;
  边距:[60,10,90,10];
  关联:[group1];
  轴缩放:[横坐标(开始=0,结束=100,y=-50)];
  浮动显示:[function (params,ticket,callback) {
            console.log(params);
            for (var{空格}i = 0, l = params.length; i < l; i++) {
            var{空格}arr = new{空格}Array("周日","周一","周二","周三","周四","周五","周六");
            var{空格}res = new{空格}Date(params[i].name).getDay();
            return{空格}params[i].name+"{空格}"+arr[res]+"{换行符}相对湿度："+params[i].value+"%";
            }
            }
            ];
  ');

  seq := seq+10;
  insert into hbpageeleforsl (FPAGEID, FELEID, FELENME, FELENMC, FELECATBYSL, FPOSX, FPOSY, FWIDTH, FHEIGHT, FPROPERTY,
  FQRYURI, FVALFROM, FSAMESELECT, FIFNEEDLABEL, FSELECTVALCAT,
  FENABLEELES, FINVISIBLEELES, FOBJPROP)
values (pnm, seq, 'oiuytr3', '发热人数趋势', 'lineChart', '-1', '-1', '-1', 225, '',
  '*q20170823xyb0001', '', '', 'N', 'N',
  '', '', '布局模式:[1];容器:[container.比较分析图];
  纵轴标签:[旋转=0,名称=发{空格}{空格}{空格}{空格}{换行符}热{空格}{空格}{空格}{空格}{换行符}人{空格}{空格}{空格}{空格}{换行符}数{空格}{空格}{空格}{空格},标签名位置=left];
  图例:[是否隐藏=是,布局模式=水平];
  图例颜色:[#33FF66];
  数据列名转换:[折线,日期,{"发热人数"}];
  工具盒显示:[];
  隐藏标题;
  边距:[60,10,90,60];
  关联:[group1];
  轴缩放:[横坐标(开始=0,结束=100)];
  浮动显示:[function (params,ticket,callback) {
            console.log(params);
            for (var{空格}i = 0, l = params.length; i < l; i++) {
            var{空格}arr = new{空格}Array("周日","周一","周二","周三","周四","周五","周六");
            var{空格}res = new{空格}Date(params[i].name).getDay();
            return{空格}params[i].name+"{空格}"+arr[res]+"{换行符}发热人数："+params[i].value+"人";
            }
            }
            ];
  ');

三个图的差别不大，浮动显示部分是js代码。三个参数不可修改，可以在浏览器中F12查看params的值。

发热人数查询完整代码：

declare
    id varchar2(60);
    name varchar2(50);
    direct varchar2(2);
    cndxml varchar2(4000);
    cndxsl clob;
    theSQL varchar2(4000);
    dispsql varchar2(4000);
    param varchar2(400);
    cfgxml varchar2(4000);
    resulttype varchar2(8);
    header varchar2(4000);
    footer varchar2(4000);
    bxml varchar2(8000);
    bxsl varchar2(8000);
    bsql clob;
  bsql_pv varchar2(5000);
    bsql_pt varchar2(5000);
begin

id := 'q20170823xyb0001';
name := '发热人数查询';
direct := '1';
cndxml := '<?xml version="1.0" encoding="GB2312"?><EprSelect></EprSelect>';
cndxsl := '';
theSQL := '';
param := '';
resulttype := 'ntable';
header := '8;$page';
footer := '1;经手人:;5;日期:';

delete from query_vws_cnd where fid=id;
insert into query_vws_cnd(fid,fname,fdirect,fcndxml,fcndxsl,fsql,fdispsql,fparam,fcfgxml,fresulttype,fheader,ffooter)
values (id,name,direct,cndxml,cndxsl,NULL,dispsql,param,cfgxml,resulttype,header,footer);

bsql := '

with t1 as (
select level + ? - 1 dateflag, 0 nums
from dual
connect by level <  ? -  ? + 2
)
,t2 as(
select distinct count(*) c1,fabsbegdt,addr
from(
  select to_char(fabsbegdt,''yyyy/mm/dd'') fabsbegdt,SUBSTR(fAddrno,0,4) addr
  from hii.ib_tbs_studentabsinfo@xxws a
   where ((SELECT c.faddr FROM hii.iphiis@xxws c right join hii.ib_tbs_studentabsinfo@xxws a on c.faddrno!=a.fschooladdrno  WHERE rownum <=1) like ''%''||?||''%'' or  ? is null )
     and  instr(a.fcondition,(select fdictno from hii.ib_tbs_studentabsinfo_base@xxws  where fdictnm=''发热'' and rownum <=1))>0
 )
 group by fabsbegdt,addr
 )
 select ''1'',to_char(t1.dateflag,''yyyy/mm/dd'') 时间,nvl(t2.c1,0) 发热人数 from t1 left join t2 on to_char(t1.dateflag,''yyyy/mm/dd'')=t2.fabsbegdt
 order by t1.dateflag
';

--注意城市信息没加进入
bsql_pv := 'begindate1_sql_equal,enddate1_sql_equal,begindate1_sql_equal,address1_sql_equal,address1_sql_equal,;';
bsql_pt := 'D,D,D,V,V,;';

delete query_tbs_dispfmt where fid = id and fband='DETAILS';
insert into query_tbs_dispfmt(fid,fband,fsql,fParaValOfSql,fParaTypeOfSql,fxml,fxsl,fdispfmt)
values (id,'DETAILS',bSQL,bsql_pv,bsql_pt,NULL,NULL,'RS');

end;

/
commit;

代码不复杂，值得注意的有两点。
1、

with t1 as (
select level + ? - 1 dateflag, 0 nums
from dual
connect by level <  ? -  ? + 2
)

这部分表示建立一个完整日期的表。？表示传递的参数。第1,3个？表示开始日期，第2个？表示结束日期。在这部分日期之内的每天都有一行记录，每行记录两个值，第二个值为0。
这是为了防止真正的查询出现某些日期不存在的情况。
2、

 select ''1'',to_char(t1.dateflag,''yyyy/mm/dd'') 时间,nvl(t2.c1,0) 发热人数 from t1 left join t2 on to_char(t1.dateflag,''yyyy/mm/dd'')=t2.fabsbegdt

在这部分查询的第一个字段表示这个图只显示一条线。