版本
| 版本 | 功能變動 |
|---|---|
| 11.0 | 和 10.0 差別： 新增 addEffect API |
| 11.0.7 | 行動端， APP\H5 版本 11.0.70 及以後支援該API。 |
| 安裝了「FineVis資料視覺化」插件 V1.8.0 及之後版本，FVS 視覺化看板支援使用 addEffect API修改儲存格背景、儲存格字體。 |
在使用API前，請務必先仔細閱讀 JS API相容說明，API預設支援普通報表和決策報表（新版）。
注：該API不支援和自訂捲軸插件同時使用。
addEffect
| 方法 | addEffect(type, opts) | 滑鼠點選或者懸浮時，儲存格或所在列欄背景顏色變化 |
|---|---|---|
| 參數 | type: string, opts: { color: string, trigger: string， single: boolean } | type：變色類型，字串
opts：變化屬性，json 格式 1）color: 變化的顏色，顏色程式碼，字串 2）trigger: 滑鼠的操作，字串，預設為滑鼠懸浮
3）single：恢復邏輯，布林型，預設 true
trigger為mouseover、single為true：滑鼠懸浮的位置變色，滑鼠懸浮到其他位置，顏色轉移到新位置 trigger為mousedown、single為true：滑鼠點選的位置變色，再次點選該位置顏色恢復/點選其他位置顏色轉移到新位置
|
| 回傳值 | void | |
| 範例 | 見範例章節 | |
| 應用範例 | 滑鼠懸浮儲存格時，所在列顯示紅色，滑鼠離開時恢復： 更多範例見範例章節。
| |
| 行動端 | APP\H5 版本 11.0.70 及以後支援該API。 | |
以下內容為API範例，分儲存格所在列變色、儲存格所在欄變色、儲存格所在列欄變色、儲存格變色，分別對應 type 參數的四個值。
儲存格所在列變色
addEffect 第一個參數 type 值為 highlightRow 時，滑鼠點選或者懸浮儲存格，儲存格所在列背景顏色發生改變。
程式碼範例
範例1：若獲取到的報表物件定義為 report ，滑鼠懸浮儲存格時所在列背景顯示為紅色，離開時恢復
report.addEffect('highlightRow',{
color: 'red',
trigger: 'mouseover',
});
範例2：若獲取到的報表物件定義為 report ，滑鼠點選儲存格時所在列背景顯示為紅色，再次點選恢復
report.addEffect('highlightRow',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例3：普通報表中，滑鼠懸浮儲存格時，所在列背景顯示為紅色，離開時恢復
_g().addEffect('highlightRow', {
color: 'red',
trigger: 'mouseover',
});
範例4：普通報表中，滑鼠點選儲存格時，所在列背景顯示為紅色，再次點選恢復
_g().addEffect('highlightRow',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例5：決策報表中，滑鼠懸浮 report0 報表塊儲存格時，所在列背景顯示為紅色，離開時恢復
_g().getWidgetByName('report0').addEffect('highlightRow', {
color: 'red',
trigger: 'mouseover',
});
範例6：決策報表中，滑鼠點選 report0 報表塊儲存格時，所在列背景顯示為紅色，再次點選恢復
_g().getWidgetByName('report0').addEffect('highlightRow', {
color: 'red',
trigger: 'mousedown',
single: false
});
範例7：在FVS中，滑鼠點選表格1儲存格時，所在列背景顯示為紅色，再次點選恢復
duchamp.getWidgetByName("表格1").addEffect('highlightRow', {
color: 'red',
trigger: 'mousedown',
single:false
});
應用範例
範例1：滑鼠懸浮儲存格時，所在列背景顏色顯示為紅色，離開時恢復
點選下載範本：儲存格所在列變色.cpt
範例2：滑鼠點選儲存格時，所在列背景顏色顯示為紅色，再次點選恢復
點選下載範本：儲存格所在列變色滑鼠點選恢復.cpt
儲存格所在欄變色
addEffect 第一個參數 type 值為 highlightCross 時，滑鼠點選或者懸浮儲存格，儲存格所在的欄背景顏色發生改變。
程式碼範例
範例1：若獲取到的報表物件定義為 report ，滑鼠懸浮儲存格時所在欄背景顏色顯示為紅色，離開時恢復
report.addEffect('highlightCol',{
color: 'red',
trigger: 'mouseover',
});
範例2：若獲取到的報表物件定義為 report ，滑鼠點選儲存格時所在欄背景顏色顯示為紅色，再次點選恢復
report.addEffect('highlightCol',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例3：普通報表中，滑鼠懸浮儲存格時，所在欄背景顏色顯示為紅色，離開時恢復
_g().addEffect('highlightCol', {
color: 'red',
trigger: 'mouseover',
});
範例4：普通報表中，滑鼠點選儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復
_g().addEffect('highlightCol',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例5：決策報表中，滑鼠懸浮 report0 報表塊儲存格時，所在欄背景顏色顯示為紅色，離開時恢復
_g().getWidgetByName('report0').addEffect('highlightCol', {
color: 'red',
trigger: 'mouseover',
});
範例6：決策報表中，滑鼠點選 report0 報表塊儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復
_g().getWidgetByName('report0').addEffect('highlightCol', {
color: 'red',
trigger: 'mousedown',
single: false
});
範例7：在 FVS 中，滑鼠點選表格1儲存格時，所在欄背景顯示為紅色，再次點選恢復
duchamp.getWidgetByName("表格1").addEffect('highlightCol', {
color: 'red',
trigger: 'mousedown',
single:false
});應用範例
範例1：滑鼠懸浮儲存格時，所在欄背景顏色顯示為紅色，離開時恢復
點選下載範本：儲存格所在欄變色.cpt
範例2：滑鼠點選儲存格時，所在欄背景顏色顯示為紅色，再次點選恢復
點選下載範本：儲存格所在欄變色滑鼠點選恢復.cpt
儲存格所在列欄變色
addEffect 第一個參數 type 值為 highlightCol 時，滑鼠點選或者懸浮儲存格，儲存格所在的列欄背景顏色發生改變。
程式碼範例
範例1：若獲取到的報表物件定義為 report ，滑鼠懸浮儲存格時所在列欄背景顏色顯示為紅色，離開時恢復
report.addEffect('highlightCross',{
color: 'red',
trigger: 'mouseover',
});
範例2：若獲取到的報表物件定義為 report ，滑鼠點選儲存格時所在列欄背景顏色顯示為紅色，再次點選恢復
report.addEffect('highlightCross',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例3：普通報表中，滑鼠懸浮儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復
_g().addEffect('highlightCross', {
color: 'red',
trigger: 'mouseover',
});
範例4：普通報表中，滑鼠點選儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復
_g().addEffect('highlightCross',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例5：決策報表中，滑鼠懸浮 report0 報表塊儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復
_g().getWidgetByName('report0').addEffect('highlightCross', {
color: 'red',
trigger: 'mouseover',
});
範例6：決策報表中，滑鼠點選 report0 報表塊儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復
_g().getWidgetByName('report0').addEffect('highlightCross', {
color: 'red',
trigger: 'mousedown',
single: false
});
範例7：在FVS中，滑鼠點選表格1儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復
duchamp.getWidgetByName("表格1").addEffect('highlightCross', {
color: 'red',
trigger: 'mousedown',
single:false
});
應用範例
範例1：滑鼠懸浮儲存格時，所在列欄背景顏色顯示為紅色，離開時恢復
點選下載範本：儲存格所在列欄變色.cpt
範例2：滑鼠點選儲存格時，所在列欄背景顏色顯示為紅色，再次點選恢復
點選下載範本：儲存格所在列欄變色滑鼠點選恢復.cpt
儲存格變色
addEffect 第一個參數 type 值為 highlightCell 時，滑鼠點選或者懸浮儲存格，儲存格背景顏色發生改變。
程式碼範例
範例1：若獲取到的報表物件定義為 report ，滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復
report.addEffect('highlightCell',{
color: 'red',
trigger: 'mouseover',
});
範例2：若獲取到的報表物件定義為 report ，滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復
report.addEffect('highlightCell',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例3：普通報表中，滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復
_g().addEffect('highlightCell', {
color: 'red',
trigger: 'mouseover',
});
範例4：普通報表中，滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復
_g().addEffect('highlightCell',{
color: 'red',
trigger: 'mousedown',
single:false
});
範例5：決策報表中，滑鼠懸浮 report0 報表塊儲存格時儲存格背景顏色顯示為紅色，離開時恢復
_g().getWidgetByName('report0').addEffect('highlightCell', {
color: 'red',
trigger: 'mouseover',
});
範例6：決策報表中，滑鼠點選 report0 報表塊儲存格時儲存格背景顏色顯示為紅色，再次點選恢復
_g().getWidgetByName('report0').addEffect('highlightCell', {
color: 'red',
trigger: 'mousedown',
single: false
});
範例7：在FVS中，滑鼠點選表格1儲存格時儲存格背景顏色顯示為紅色，再次點選恢復
duchamp.getWidgetByName("表格1").addEffect('highlightCell', {
color: 'red',
trigger: 'mousedown',
single:false
});
應用範例
範例1：滑鼠懸浮儲存格時儲存格背景顏色顯示為紅色，離開時恢復：
點選下載範本：儲存格變色滑鼠離開恢復.cpt
範例2：滑鼠點選儲存格時儲存格背景顏色顯示為紅色，再次點選恢復
點選下載範本：儲存格變色滑鼠點選恢復.cpt
儲存格字體變化
addEffect 第一個參數 type 值為 setCellFont 時，滑鼠點選或者懸浮儲存格，儲存格字體格式變化。
程式碼範例
以普通報表為例，滑鼠懸浮儲存格時字體顯示為紅色粗體 14 號，離開時恢復
_g().addEffect('setCellFont', {
style: {
bold: true,
fontSize: 14,
color: 'red'
},
trigger: 'mouseover',
single: true
});
應用範例
點選可下載範本：滑鼠懸浮儲存格字體變化.cpt
注意事項
1）當報表中設定了儲存格所在列變色，同時設定了凍結欄，凍結欄會將一列分割成A、B兩部分，API對A、B兩部分分別生效，如下圖所示：
2）當報表中設定了儲存格所在欄變色，同時設定了凍結列，凍結列會將一列分割成A、B兩部分，API對A、B兩部分分別生效，與第1）節原理相同。
3）當開啟新計算引擎時，API不受凍結列或凍結欄影響。
