ReportStudio入门教程(六十二) - JS-可变宽度的图表

这回我们再介绍一段JS,可以生成可变宽度的简单图表

1.基本报表

ReportStudio入门教程(六十二) - JS-可变宽度的图表_第1张图片

Margin数据项:

ReportStudio入门教程(六十二) - JS-可变宽度的图表_第2张图片

2.拖一个HTML项目,解锁,再拖4个HTML项目

在这些HTML项目中,我们要存放JS

ReportStudio入门教程(六十二) - JS-可变宽度的图表_第3张图片


3.编写JS代码

从左到右,依次为1,2,3,4,5

ReportStudio入门教程(六十二) - JS-可变宽度的图表_第4张图片

第2个HTML项目,需要需改源类型,改为数据项值

第3个HTML项目:

ReportStudio入门教程(六十二) - JS-可变宽度的图表_第5张图片

第4个HTML项目也修改源类型

ReportStudio入门教程(六十二) - JS-可变宽度的图表_第6张图片

第5个HTMl项目:

ReportStudio入门教程(六十二) - JS-可变宽度的图表_第7张图片

完整的JS代码:

<script>

var barlen=100*((length_driver)) ;

var barheight=((width_driver)/10) ;

var myBar='<div style="background-color:blue; width:' +barlen+'; height:' + barheight +'"></div>' ;

document.write(myBar) ;

</script>

我们就是将长度和宽度动态的使用数据项值传进去

4.运行下看

还不错吧,挺实用的

好了,这回就到这里

你可能感兴趣的:(实例,Cognos,JS控制图表宽度,ReportStudio)