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

  • Last update:December 24, 2021
  • 1. 概述

    1.1 预期效果

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

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

    Snag_2485b8fd.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_247ae1a9.png

    2.2.2 绑定图表数据

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

    Snag_247c1f2a.png

    2.2.3 设置坐标轴标签

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

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

    Snag_2480d1ae.png

    2.3 效果预览

    2.3.1 PC 端

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

    Snag_24845e01.png

    2.3.2 移动端

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

    Snag_2487b625.png

    3. 模板下载

    Attachment List


    Theme: 下架文档
    Already the First
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy