最新历史版本 :JS实现改变图表指定分类名颜色 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

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();
    }
}
注：若 iOS 手机预览时显示 NaN ，可能是时间格式的问题。可将代码 var date = new Date(this);  替换为 var date= new Date(Date.parse(this.replace(/-/g,  "/")));  

2.2 效果预览

2.2.1 PC 端

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

image.png

2.2.2 移动端

APP 和 HTML5端均支持，效果如下图所示：

1584774862750184.png

3. 模板下载编辑

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