圖表顯示部分系列API

1.1 應用場景

當圖表系列較多時，使用者希望可以自己設定哪些系列顯示，哪些系列不顯示。以決策報表為例，實現效果如下圖：

.

1.2 實現思路

透過FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex).setSeriesVisible()獲取需要顯示的系列圖表物件，在表單中顯示這些系列。

注1：該API不支援擴展圖表。

注2：普通報表呼叫該API支援行動端，決策報表報表塊內圖表，僅支援行動端11.0.63及之後版本。

注3：獲取圖表物件的方法參見文檔：如何獲取圖表物件

注4：FVS 視覺化看板詳情可見：FVS圖表顯示部分系列API

2.1 準備範本

開啟設計器內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\柱形圖.cpt

2.2 修改範本資料

將柱形圖的系列名修改為「產品」，如下圖所示：

2.3 新增載入結束事件

菜單欄點選「範本>範本 Web 屬性>分頁預覽>為該範本單獨設定」，新增「載入結束事件」，如下圖所示：

JavaScript 程式碼如下：

setTimeout(function() {
var vanchart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);//獲取圖儲存格素，即柱形圖    
vanchart.setSeriesVisible([0, 1]); //顯示柱形圖的系列1和系列2   
}, 200);

2.4 效果預覽

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

3.1 準備資料

1）建立決策報表，建立資料集 ds2，SQL 語句為：SELECT * FROM 銷量，如下圖所示：

3.2 插入圖表

將柱形圖拖到決策報表中，類型選擇堆積柱形圖，點選圖表屬性面板的，新增 2 個圖表，「圖表2」選擇百分比堆積條形圖，「圖表3」選擇折線圖，如下圖所示：

3.3 綁定資料

這 3 個圖表綁定資料的方法是一致的，如下圖所示：

3.4 新增按鈕

圖表下方新增 3 個按鈕，如下圖所示：

3.5 設定顯示系列

3.5.1 柱形圖

選中「button0」，給按鈕新增一個「點選」事件，如下圖所示：

JavaScript 程式碼如下：

var vanchart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);//獲取chart0元件的第一個圖表，即柱形圖
vanchart.setSeriesVisible([0,1]);//顯示柱形圖的系列1和系列2

注：初始化事件中使用此方法需使用延時函式 setTimeout()

3.5.2 條形圖

選中「button1」，給按鈕新增一個「點選」事件，如下圖所示：

JavaScript 程式碼如下：

var vanchart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(1);//獲取chart0元件的第二個圖表，即條形圖
vanchart.setSeriesVisible();//顯示條形圖的系列，此處沒有參數，即不顯示系列

3.5.3 折線圖

選中「button2」，給按鈕新增一個「點選」事件，如下圖所示：

JavaScript 程式碼如下：

var vanchart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(2);//獲取chart0元件的第三個圖表，即折線圖
vanchart.setSeriesVisible([2,3]);//顯示折線圖的系列3和系列4

3.6 效果預覽

1）PC 端

儲存範本，點選「PC端預覽」，效果如下圖所示：

.

2）行動端

.

1）範例一

點選下載範本：普通報表圖表顯示部分系列.cpt

2）範例二

點選下載範本：決策報表圖表顯示部分系列.frm