JS 实现图表系列间值的比较

  • 文档创建者:axing
  • 编辑次数:3次
  • 最近更新:Leo.Tsai 于 2020-03-09
  • 1. 概述

    1.1 问题描述

    图表的特效>条件属性中,系列之间的数据不能直接进行比较。

    现在想要实现如下图所示的系列间值的比较,当饮料销量小于点心时,柱形配色变为红色。

    image.png

    1.2 实现思路

    通过 JS 实现系列间值的比较,并根据比较结果改变柱形配色。

    2. 示例

    2.1 报表设计

    1)新建数据集 ds1,数据库查询语句为:SELECT * FROM 销量

    image.png

    2)合并一片区域的单元格,插入柱形图,如下图绑定图表数据:

    image.png

    3)在柱形图样式>标签下,勾选使用标签,点击自定义,然后编辑 JS。

    image.png

    JS 代码如下:

    function(){   
        if(this.points[0].value<=this.points[1].value)   
            this.points[0].color="red";    
    }

    2.2 效果预览

    1)PC 端

    保存报表,点击分页预览,效果如下图所示:

    1583565655318032.png

    2)移动端

    image.png

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS 实现图表系列间值的比较.cpt

    点击下载模板:JS 实现图表系列间值的比较.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!