将Y轴标签的格式设置为日期

  • 文档创建者:Leo.Tsai
  • 编辑次数:2次
  • 最近更新:Leo.Tsai 于 2020-06-17
  • 1. 概述

    1.1 问题描述

    某些场景下,图表 Y 轴是来源于数据集的日期型数据,Y 轴的轴标签也需要修改为日期格式。以折线图为例,效果如下图所示:

    Snag_96aeeda.png

    如果只是将图表样式>坐标轴>Y轴>格式下的轴标签修改为日期型

    Snag_96cc3a9.png

    前端预览时,是无法正常显示图表数据的,如下图所示:

    Snag_972cbda.png

    那么如何设置既能将轴标签改为日期格式又能保证图表正常展示数据呢?下面将详细介绍。

    1.2 解决方案

    1)将数据集中 Y 轴对应的日期数据拖入到单元格中,用DATETONUMBER(date)公式转为毫秒。

    2)图表绑定已经转化为毫秒的单元格数据。

    3)最后将图表 Y 轴的轴标签修改成日期型。

    注:DATETONUMBER(date)公式的介绍参见文档:日期和时间函数

    2. 示例

    2.1 准备数据

    新建普通报表,新建内置数据集,将数据集名称修改为 ds1,如下图所示:

    数据集中工艺字段为字符串型,对应 X 轴的分类。排期字段为日期型,对应 Y 轴的值。

    Snag_972f730.png

    2.2 插入图表

    合并一片区域单元格,选中合并后的单元格 A1,点击插入图表快捷按钮,插入折线图,如下图所示:

    Snag_97fd706.png

    2.3 日期转毫秒

    将内置数据集中的工艺排期字段分别拖到 A22 和 B22 单元格中,选中 D22 单元格,点击插入公式快捷按钮,插入公式:DATETONUMBER(B22),如下图所示:

    Snag_98043f9.png

    2.4 绑定数据

    折线图属性面板选择单元格元素>数据,数据来源下拉选择单元格数据,分类名设置为 A22 单元格,新增一个系列名为空的系列,设置值为 D22 单元格,如下图所示:

    Snag_982a0f4.png

    2.5 设置样式

    2.5.1 标题

    折线图属性面板选择单元格元素>样式>标题,勾选标题可见,标题内容为:半导体工艺优化排期,如下图所示:

    Snag_9859e94.png

    2.5.2 坐标轴

    折线图属性面板选择单元格元素>样式>坐标轴>Y轴,值定义最小值为:1262275200000,表示轴标签最小为2011-03-13,将轴标签修改为日期型,如下图所示:

    注:设置最小值的目的是为了让 Y 轴的值可以有一个合理区间,让折线图走势更加明显。

    Snag_986c7d1.png

    2.5.3 提示

    折线图属性面板选择单元格元素>样式>提示,勾选使用数据点提示,选中分类名、系列名、值,值的格式设置为日期型,如下图所示:

    Snag_98a023c.png

    2.6 隐藏单元格

    选中第 22 行,右键选择隐藏,前端不展示单元格数据,如下图所示:

    Snag_98c01b5.png

    2.7 效果预览

    2.7.1 PC 端

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

    3.png

    2.7.2 移动端

    1591251209320358.jpg

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\图表Y轴标签设置为日期格式.cpt

    点击下载模板:图表Y轴标签设置为日期格式.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!