在数据可视化过程中,报表与图表的协同展示至关重要,能够有效揭示数据之间的内在联系。借助finereport这款专业的web报表工具,用户可以轻松实现报表与图表的深度集成,从而提升数据分析的直观性与表现力。
1、 打开模板文件
2、 插入皮肤控件
3、 如下图所示,将饼状图控件拖拽至柱状图左侧区域。

4、 新建数据源
5、 构建新数据集ds2:从数据库表中选取全部字段,筛选条件默认为恒成立;当产品参数为空时,不添加额外限制;若参数非空,则追加“产品类型 = 指定值”的过滤逻辑。
6、 绑定图表数据源
7、 饼状图配置
8、 选中饼状图控件,在右侧属性面板中切换至“数据”选项卡,完成对应的数据映射设置,操作界面如下所示。

9、 柱状图配置
10、 选中柱状图控件,将其数据源切换为新建的ds2数据集;横轴(分类轴)保持为“销售员”,图例项(系列名称)设为“产品”,纵轴数值(系列值)仍使用“销量”,详细配置参见下图。

11、 配置跳转链接
12、 当用户点击饼状图某一片段时,该片段所代表的数据将自动传递给柱状图,进而驱动ds2数据集参数更新,最终触发柱状图实时重绘。这种联动机制依托于组件间的数据流传递,使饼图的操作行为直接决定柱状图的内容呈现,充分展现可视化元素间的动态响应能力。
13、 如图所示,选中饼状图后,在右侧属性面板中进入“特效 → 交互属性”,点击“添加超级链接”。链接类型选择“当前表单对象”,目标组件填写柱状图的组件名,并新增一个名为product的参数,其值设定为当前点击系列的名称。
14、 若需实现凤脾组件与其他同表单内控件的跳转联动,应统一采用“当前表单对象”作为链接方式。
15、 完成设置后保存模板。

16、 页面布局美化
17、 在表单右下角的组件树中定位body主容器,将其上下左右内边距均设为10,组件间间距设为5,具体参数设置如下图所示。

18、 为表格及两个图表控件统一添加黑色边框。先选中表格组件,在属性栏中点击“样式”后的设置按钮,调整边框线型与颜色,操作示意如下。
19、 同样方法依次为饼状图和柱状图控件配置黑色边框。

20、 效果预览验证
21、 点击工具栏中的“预览”按钮,在浏览器中加载模板,点击饼状图任意扇区,即可观察到如图所示的联动刷新效果。











