1. 概述
适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FVS 模板的相关功能。
1.1 应用场景
在 FVS 模板中制作图表时,希望根据不同条件,动态显示警戒线。如下图所示:
1.2 实现思路
图表数据及警戒线使用公式获取单元格数据,单元格根据参数过滤实现数据变化。
控件编辑值后通过 JS 刷新图表,实现图表数据跟随单元格数据变化。
2. 示例
2.1 新建模板
点击设计器左上角「文件>新建可视化看板>创建空白可视化看板」。
根据实际情况自定义模板名称、尺寸,选择模板样式为「浅色主题一」,最后点击「创建看板」。
2.2 准备数据
根据实际情况准备数据,本例新建 内置数据集,数据集内容如下图所示:
2.3 设计模板内容
2.3.1 添加组件
在组件区找到标题、表格、折线图、下拉框组件,添加到画布中,调整到合适的布局。如下图所示:
2.3.2 设置标题组件
分别设置标题内容为「胶种:」和「检测项:」,用于区别控件内容。如下图所示:
2.3.3 设置下拉框控件
两个下拉框控件,将分别绑定参数 jz 和 jcx(即胶种和检测项的拼音缩写),用于后续过滤表格数据。
1)选中第一个下拉框控件,绑定参数 jz ,选项值来源为数据集中的「胶种」字段,默认值为字符串「A」。如下图所示:
2)选中第一个下拉框控件,绑定参数 jcx ,选项值来源为数据集中的「检测项」字段,默认值为字符串「MH」。如下图所示:
2.3.4 设置表格组件
1)选中表格,点击右侧配置面板「编辑组件」进入编辑界面。
2)将内置数据集中字段拖入表格,输入对应标题,具体样式参考下图。
3)双击 A2 单元格,设置过滤条件为:(列名:检测项) 等于 $jcx and (列名:胶种) 等于 $jz
4)点击「返回可视化看板」返回画布。
2.3.5 设置折线图组件
选中折线图,数据来源选择 单元格数据 :
分类名为「检测日期」所在单元格,输入公式 =表格1_页面1~G2
系列名直接输入文本「检测值」
系列值为「检测值」所在单元格,输入公式 =表格1_页面1~D2
如下图所示:
2.4 设置警戒线
选中折线图,点击「样式>背景>绘图区」,点击添加警戒线,分别设置「上限」和「下限」。
1)上限
位置选择「Y轴」,值为公式 =max(表格1_页面1~E2) ,提示文字内容为公式 ="上限" + max(表格1_页面1~E2) 。如下图所示:
2)下限
位置选择「Y轴」,值为公式 =min(表格1_页面1~F2) ,提示文字内容为公式 ="下限" + min(表格1_页面1~F2) 。如下图所示:
2.5 添加JS刷新图表
当图表使用单元格数据时,若表格数据更新,图表是无法跟随刷新的。此时可选择开启图表组件监控刷新,或给控件组件添加编辑结束事件,通过 JS 实现刷新图表。
给两个下拉框控件均添加一个编辑结束事件,JavaScript 代码如下:
duchamp.getWidgetByName("折线图1_页面1").refresh();
步骤如下图所示:
2.6 效果预览
2.6.1 PC 端
保存模板,点击右上角「预览」,效果如 1.1 节所示。
2.6.2 移动端
移动端请自行开启 移动端布局,预览方式请参考 FVS移动端预览 。效果如下图所示:
3. 模板下载
点击下载模板:FVS图表实现动态警戒线.fvs