图表显示部分系列

不念不忘少年蓝@ 2023-06-06 13:28 20阅读 0赞

var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts\[0\];//获取chart0控件的第一个图表，即柱形图  
vanchart.setSeriesVisible(\[0,1\]);//显示柱形图的系列 1 和系列 2

## 1. 版本 ##

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <th>&nbsp; 设计器版本</th> 
   <th>&nbsp;JAR 包版本</th> 
  </tr> 
  <tr> 
   <td>&nbsp; 9.0</td> 
   <td>&nbsp; 2018-1-24</td> 
  </tr> 
  <tr> 
   <td>&nbsp; 10.0</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 2. 描述 ##

当图表系列较多时，用户不想展示所有，而是希望可以自己设置哪些系列的图例灰化，哪些系列的图例显示。

以决策报表为例，实现效果如下图：  
![aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzU2ODQxMDdqUXBIcVB2Wi5naWY][]

## 3. 实现方法 ##

提供接口，让用户可以获取图表对象后，自己设置系列的显示和灰化。

通过 FR.Chart.WebUtils.getChart("chartId").vanCharts.charts\[chartIndex\].setSeriesVisible()，获取到要显示系列的图表对象，在表单中实现系列显示，其中“ chartId”为图表块控件名。

注：只支持新图表，获取图表对象的方法可参考：[\[新\]图表接口][Link 1]

## 4. 示例一 表单里显示部分系列 ##

### 4.1 制作模板 ###

1）新建决策报表，添加 SQL 数据集 ds1：SELECT \* FROM 销量。如下图：

![format_png][]

2）将柱形图拖入到报表中，如下图：

![format_png 1][]

3）选中图表，类型为堆积柱形图，并依次设置图表的类型、数据、样式和特效，这里不再一一介绍。

![format_png 2][]

![format_png 3][]

4）点击右侧+号，添加图表 2、3，类型分别为百分比堆积条形图、折线图，并设置图表的类型、数据、样式和特效（数据设置同柱形图）。

![format_png 4][]

![format_png 5][]

![format_png 6][]

### 4.2 设置显示系列 ###

添加三个按钮控件，分别设置按钮的名称和背景，并设置点击事件。

选择 button0，添加点击事件，如下：

![format_png 7][]

JS 代码如下：

var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0];//获取chart0控件的第一个图表，即柱形图
    vanchart.setSeriesVisible([0,1]);//显示柱形图的系列 1 和系列 2

注：FR.Chart.WebUtils.getChart("name").vanCharts.charts\[0\]，表示获取到指定控件的第一个图表，参数从 0 开始。

注：.setSeriesVisible(\[0,1\])，表示显示该图表的第一和第二个系列，参数从 0 开始。

注：在初始化事件中使用此方法需使用[setTimeout()][setTimeout]延时函数。

同理，设置按钮 button1 的点击事件：

![format_png 8][]

JS 代码如下：

var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[1];//获取 chart0 控件的第二个图表，即条形图
    vanchart.setSeriesVisible();//显示条形图的系列，此处没有参数，即不显示

注：FR.Chart.WebUtils.getChart("chart0").vanCharts.charts\[1\]; //charts\[1\] 表示获取 chart0 控件的第二个图表

注：.setSeriesVisible()，不设置参数时，即不显示系列。

同理，设置按钮 button2 的点击事件：

![format_png 9][]

JS 代码如下：

var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[2];//获取 chart0 控件的第三个图表，即折线图
    vanchart.setSeriesVisible([2,3]);//显示折线图的系列 3 和系列 4

### 4.3 保存预览 ###

保存模板，点击预览，即可看到如上图所示效果。

已完成模板可参考：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\Chart\\GraphSwitching\\图表显示部分系列.frm

## 5. 示例二 CPT里显示部分系列 ##

### 5.1 模板准备 ###

打开模板：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\Chart\\ColumnChart\\柱形图.cpt

### 5.2 修改模板数据 ###

为了方便看效果，修改图表系列名为产品，如下图：

![format_png 10][]

### 5.3 添加加载结束事件 ###

打开模板>模板 Web 属性>分页预览设置，选择为该模板单独设置，添加加载结束事件：

![format_png 11][]

输入下面的 JS 代码：

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

### 5.4 保存预览 ###

保存模板，使用分页预览，实现效果如下图：

![format_png 12][]

## 6. 示例三 CPT里默认不显示所有系列 ##

### 6.1 模板设置 ###

设置所有系列默认不显示，直接将.setSeriesVisible()的参数去掉，即第三行代码改为：vanchart.setSeriesVisible() 即可，如下图所示：

![format_png 13][]

### 6.2 保存预览 ###

保存模板，使用分页预览，实现效果如下图：

![format_png 14][]

[aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzU2ODQxMDdqUXBIcVB2Wi5naWY]: /images/20230601/eb98350461324978a5acd0137334d0e7.png
[Link 1]: http://help.finereport.com/doc-view-2114.html
[format_png]: /images/20230601/d23d097442a142a99ef4560895d27089.png
[format_png 1]: /images/20230601/f69076efe4624fc2933a7fb9a8fd30e9.png
[format_png 2]: /images/20230601/cac4392979234042839580c636d69f31.png
[format_png 3]: /images/20230601/2e46ccb6c4b74f9f82158875c0aeb673.png
[format_png 4]: /images/20230601/97da0d59669a4560be1e5fdcd4c1916a.png
[format_png 5]: /images/20230601/8565ed2d262f4f2b80e0f67d7e33deae.png
[format_png 6]: /images/20230601/95eb852a24234a91aee7c537d5db3032.png
[format_png 7]: /images/20230601/44366a6006ea466b835890a103c54849.png
[setTimeout]: http://help.finereport.com/doc-view-1742.html
[format_png 8]: /images/20230601/8193c8382477457ca7c1ba8933b4efce.png
[format_png 9]: /images/20230601/96ab5fed45034f46b08159323ca6c96b.png
[format_png 10]: /images/20230601/89691e3dc8604d508694f53403b4a962.png
[format_png 11]: /images/20230601/e9db4f83896a4aa08b0bc58a1c5a6d8a.png
[format_png 12]: /images/20230601/d48d131b719945149aa28e58143f93b5.png
[format_png 13]: /images/20230601/035e35c094fa410c9735a09ca1cba4e7.png
[format_png 14]: /images/20230601/ef06bd696cea4f09a319247f603811ff.png