JS實現改變圖表指定分類名顔色

1.1 問題描述

在進行圖表展示時，有時爲了突出某些分類對值的影響，需要對分類名做特殊顯示。

例如在一個月的銷量中，将周末兩天的分類名标紅，效果如下圖所示：

1.2 實現思路

利用 JS 自定義分類軸标簽格式。

2.1 報表設計

1）新建普通報表，新建内置數據集 Embedded1，如下圖所示：

2）單元格裏插入折線圖，如下圖綁定圖表數據：

3）選中折線圖，在樣式>坐标軸>X軸中自定義軸标簽格式，并使用html解析文本内容，如下圖所示：

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 端

保存報表，點擊分頁預覽，效果如下圖所示：

2）移動端

已完成的模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\圖表JS實例\JS實現改變指定分類名顔色.cpt

點擊下載模板：JS實現改變指定分類名顔色.cpt