反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

JS实现改变图表指定分类名颜色

  • 文档创建者:axing
  • 历史版本:3
  • 最近更新:Leo.Tsai 于 2020-03-25
  • 1. 概述

    1.1 问题描述

    在进行图表展示时,有时为了突出某些分类对值的影响,需要对分类名做特殊显示。

    例如在一个月的销量中,将周末两天的分类名标红,效果如下图所示:

    image.png

    1.2 实现思路

    利用 JS 自定义分类轴标签格式。

    2. 示例

    2.1 报表设计

    1)新建普通报表,新建内置数据集 Embedded1,如下图所示:

    image.png

    2)单元格里插入折线图,如下图绑定图表数据:

    image.png

    3)选中折线图,在样式>坐标轴>X轴中自定义轴标签格式,并使用html解析文本内容,如下图所示:

    image.png

    JS 代码如下:

    function(){ 
        var date = new Date(this);
        if(date.getDay()==0||date.getDay()==6){
            return "<font color='red'>"+date.getDate()+"</font>"
        }else{
            return date.getDate();
        }
    }

    2.2 效果预览

    1)PC 端

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

    image.png

    2)移动端

    1584774862750184.png

    3. 模板下载

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\图表JS实例\JS实现改变指定分类名颜色.cpt

    点击下载模板:JS实现改变指定分类名颜色.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526