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();
    }
}

注：若 iOS 手機預覽時顯示 NaN ，可能是時間格式的問題。可將程式碼 var date = new Date(this);  更換為 var date= new Date(Date.parse(this.replace(/-/g,  "/")));  

2.2 效果預覽

2.2.1 PC 端

儲存報表，點選「分頁預覽」，效果如下圖所示：

2.2.2 行動端

APP 和 HTML5端均支援，效果如下圖所示：

點選下載範本：JS實現改變圖表指定分類名顏色.cpt