圖表顯示部分系列接口

1.1 應用場景

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

1.2 實現思路

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

注1：該接口支持移動端，但決策報表的報表塊中圖表不支持調用該接口。

注2：獲取圖表對象的方法參見文檔：如何獲取圖表對象

2.1 準備數據

1）新建決策報表，新建數據集 ds2，SQL 語句爲：SELECT * FROM 銷量，如下圖所示：

2.2 插入圖表

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

2.3 綁定數據

這 3 個圖表綁定數據的方法是一緻的，如下圖所示：

2.4 添加按鈕

圖表下方添加 3 個按鈕，如下圖所示：

2.5 設置顯示系列

2.5.1 柱形圖

選中button0，給按鈕添加一個點擊事件，如下圖所示：

JavaScript 代碼如下：

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

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

2.5.2 條形圖

選中button1，給按鈕添加一個點擊事件，如下圖所示：

JavaScript 代碼如下：

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

2.5.3 折線圖

選中button2，給按鈕添加一個點擊事件，如下圖所示：

JavaScript 代碼如下：

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

2.6 效果預覽

1）PC 端

保存模板，點擊PC端預覽，效果如下圖所示：

2）移動端

3.1 準備模板

打開設計器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\柱形圖.cpt

3.2 修改模板數據

将柱形圖的系列名修改爲産品，如下圖所示：

3.3 添加加載結束事件

菜單欄點擊模板>模板 Web 屬性>分頁預覽>爲該模板單獨設置，添加加載結束事件，如下圖所示：

JavaScript 代碼如下：

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

3.4 效果預覽

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

注：由於加載結束事件不支持調用獲取圖表塊對象的方法，故該示例不支持移動端預覽。

1）示例一

已完成模板參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\決策報表圖表顯示部分系列.frm

點擊下載模板：決策報表圖表顯示部分系列.frm

2）示例二

已完成模板參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\普通報表圖表顯示部分系列.cpt

點擊下載模板：普通報表圖表顯示部分系列.cpt