反馈已提交

网络繁忙

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

多分类图表实现分类轴某分类隐藏

  • 文档创建者:Alicehyy
  • 历史版本:1
  • 最近更新:Alicehyy 于 2021-12-24
  • 1. 概述

    1.1 预期效果

    在设计图表时,有时需要绑定双(多)分类,细化数据展示效果,但预览时,只需显示某一个分类的情况。

    例如:X轴 绑定「年月」和「年月日」字段,但显示时,坐标轴只需要显示「年月」,折线图要以「年月日」维度查看数据。如下图所示:

    Snag_248fbbcc.png

    1.2 实现思路

    通过轴标签格式自定义使用 JavaScript 代码实现。判断分类轴内容的长度,使其大于某个长度时显示为空。

    注:适用于不同分类长度均不同的情况。

    2. 示例

    2.1 数据准备

    新建普通报表,新建数据库查询 ds1 ,SQL 查询语句为:

    SELECT 

    Substr(订购日期,1,7) as 月,Substr(订购日期,1,10) as 日,运货费

    FROM S订单 

    where Substr(订购日期,1,7) is not null

    order by Substr(订购日期,1,7) limit 40

    Snag_2476049b.png

    2.2 报表设计

    2.2.1 插入折线图

    选中一片单元格区域,合并单元格后,插入「折线图」。如下图所示:

    Snag_249103cc.png

    2.2.2 绑定图表数据

    选中图表,点击「单元格元素>数据」,绑定图表数据如下图所示:

    Snag_247c1f2a.png

    2.2.3 设置坐标轴标签

    点击「样式>坐标轴>X轴」,设置「标签>文本旋转」为 -90 ,轴标签格式选择「自定义」,输入代码如下:

    function() {
    if (this.length > 7) return '';
        // 当分类轴内容长度大于7时,返回空,实现隐藏
    else return this;
    }

    Snag_2494dcc9.png

    2.3 效果预览

    2.3.1 PC 端

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

    Snag_249581f2.png

    2.3.2 移动端

    App 端和 HTML5 端均支持,效果如下图所示:

    Snag_2496b1d7.png

    3. 模板下载

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

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

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

    总裁办24H投诉

    热线电话:173-1278-1526