用户工具

站点工具

您的足迹: • 5.4富文本嵌入kpi
1.bi与可视化saca.dataviz:5图册:5.19dataviz的灵魂功能

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版 		前一修订版
1.bi与可视化saca.dataviz:5图册:5.19dataviz的灵魂功能 [2021/08/27 15:16]
admin 		1.bi与可视化saca.dataviz:5图册:5.19dataviz的灵魂功能 [2021/08/30 16:38] (当前版本)
admin
行 1: 行 1:
 <markdown> <markdown>
-#5.19dataviz的灵魂用法+#5.19DataViz的灵魂功能
 ##1. 列表编辑字段拼接html标签 ##1. 列表编辑字段拼接html标签
-列表的单元格是可以渲染html标签的，比如img标签，单元格中就会展示图片；video标签，单元格中就会展示视频。以下两个超链接是示例用法：  +列表的单元格是个宝藏，数据中包含html标签会被渲染。以下两个超链接是示例用法：  
 [使用列表制作指示同环比正负的上下箭头](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:4%E5%9B%BE%E8%A1%A8:4.12%E4%BD%BF%E7%94%A8%E5%88%97%E8%A1%A8%E5%88%B6%E4%BD%9C%E6%8C%87%E7%A4%BA%E5%90%8C%E7%8E%AF%E6%AF%94%E6%AD%A3%E8%B4%9F%E7%9A%84%E4%B8%8A%E4%B8%8B%E7%AE%AD%E5%A4%B4)   [使用列表制作指示同环比正负的上下箭头](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:4%E5%9B%BE%E8%A1%A8:4.12%E4%BD%BF%E7%94%A8%E5%88%97%E8%A1%A8%E5%88%B6%E4%BD%9C%E6%8C%87%E7%A4%BA%E5%90%8C%E7%8E%AF%E6%AF%94%E6%AD%A3%E8%B4%9F%E7%9A%84%E4%B8%8A%E4%B8%8B%E7%AE%AD%E5%A4%B4)  
 [列表实现数据颜色判断](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:4%E5%9B%BE%E8%A1%A8:4.22%E5%88%97%E8%A1%A8%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E9%A2%9C%E8%89%B2%E5%88%A4%E6%96%AD)   [列表实现数据颜色判断](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:4%E5%9B%BE%E8%A1%A8:4.22%E5%88%97%E8%A1%A8%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E9%A2%9C%E8%89%B2%E5%88%A4%E6%96%AD)  
 编辑字段中可以写复杂的逻辑，当然也可使用SQL数据集，提前写好相关的逻辑。   编辑字段中可以写复杂的逻辑，当然也可使用SQL数据集，提前写好相关的逻辑。  
 +曾使用此方式解决如下问题：  
 +1. 筛选弹出页中的图片，使用group_concat()函数还可以横向拼接图片  
 +2. 解决弹出页播放的视频内容  
 +3. 单元格内实现富文本的效果，动态变换数据及文字样式  
 +4. 动态拼接超链接地址
 +
 ##2. 网页控件 ##2. 网页控件
 网页控件本身是一个iframe，用法灵活能解决很多问题。列举如下   网页控件本身是一个iframe，用法灵活能解决很多问题。列举如下  
 1. 网页控件实现过滤条件筛选图册   1. 网页控件实现过滤条件筛选图册  
-理论基础  +基础条件  
 [外部页面如何实现与图册内图表的联动交互](http://www.idataviz.com/doc/extended/interacting_webpage.html)   [外部页面如何实现与图册内图表的联动交互](http://www.idataviz.com/doc/extended/interacting_webpage.html)  
 代码示例   代码示例  
 [图册内资源传参过滤](http://www.idataviz.com/doc/userguide/filter.html?h=%E5%9B%BE%E5%86%8C%E5%86%85%E8%B5%84%E6%BA%90%E4%BC%A0%E5%8F%82)   [图册内资源传参过滤](http://www.idataviz.com/doc/userguide/filter.html?h=%E5%9B%BE%E5%86%8C%E5%86%85%E8%B5%84%E6%BA%90%E4%BC%A0%E5%8F%82)  
 2. 网页控件实现导航菜单   2. 网页控件实现导航菜单  
 +3. 嵌入外部的时间、天气等控件  
 +4. 嵌入用户自己实现的页面  
 +5. 视频直播流  
 +缺点： iframe有跨域的限制，非原生的下拉框会被自由块边界截断，iframe的性能与浏览器差一个数量级，不适合大规模使用。
  
 ##3. 图表左键自定义函数 ##3. 图表左键自定义函数
-用户可以编写回调函数，使用js实现交互动作。  +用户可以编写回调函数，使用js定义交互动作，这很自由。  
 1. [控制tab所绑定自由块的显隐](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:5%E5%9B%BE%E5%86%8C:5.14%E4%BB%BB%E6%84%8F%E5%9B%BE%E8%A1%A8%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E6%8E%A7%E5%88%B6tab%E5%88%87%E6%8D%A2)   1. [控制tab所绑定自由块的显隐](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:5%E5%9B%BE%E5%86%8C:5.14%E4%BB%BB%E6%84%8F%E5%9B%BE%E8%A1%A8%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E6%8E%A7%E5%88%B6tab%E5%88%87%E6%8D%A2)  
 2. 根据参数实现动态的跳转动作   2. 根据参数实现动态的跳转动作  
-dataviz可以配置的跳转目标是固定的，在这里可以实现多个目标页面的跳转。   +dataviz可以配置的跳转目标是固定的，在这里可以根据参数（维度值）判断实现多个目标页面的跳转   
-3. 弹出自定义样式的提示框 +3. 弹出自定义样式的提示框样式   
 +4. 实现特殊的联动逻辑   
 +5. 与某个rest接口做数据交互   
 +...
  
 ##4. 详细属性   ##4. 详细属性  
行 33: 行 45:
 1. 替换切换的按钮   1. 替换切换的按钮  
 tab控件按钮样式单一，只有选中与未选中两种样式。现在可以指定任意的图片/富文本/图标作为按钮，按钮的样式/位置/布局不再有限制。   tab控件按钮样式单一，只有选中与未选中两种样式。现在可以指定任意的图片/富文本/图标作为按钮，按钮的样式/位置/布局不再有限制。  
-2. 使用图表切换自由块显隐+2. 使用图表切换自由块显隐  
 如前述“3. 图表左键自定义函数”，可以使用图表[控制tab所绑定自由块的显隐](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:5%E5%9B%BE%E5%86%8C:5.14%E4%BB%BB%E6%84%8F%E5%9B%BE%E8%A1%A8%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E6%8E%A7%E5%88%B6tab%E5%88%87%E6%8D%A2)，并且可以与[联动同时生效](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:5%E5%9B%BE%E5%86%8C:5.15%E5%9B%BE%E8%A1%A8%E8%81%94%E5%8A%A8%E5%B9%B6%E4%B8%94%E8%83%BD%E5%A4%9F%E5%88%87%E6%8D%A2%E5%85%B6%E4%BB%96%E8%87%AA%E7%94%B1%E5%9D%97%E6%98%BE%E9%9A%90%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%B3%95)。   如前述“3. 图表左键自定义函数”，可以使用图表[控制tab所绑定自由块的显隐](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:5%E5%9B%BE%E5%86%8C:5.14%E4%BB%BB%E6%84%8F%E5%9B%BE%E8%A1%A8%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E6%8E%A7%E5%88%B6tab%E5%88%87%E6%8D%A2)，并且可以与[联动同时生效](http://www.idataviz.com/wiki/doku.php?id=1.bi%E4%B8%8E%E5%8F%AF%E8%A7%86%E5%8C%96saca.dataviz:5%E5%9B%BE%E5%86%8C:5.15%E5%9B%BE%E8%A1%A8%E8%81%94%E5%8A%A8%E5%B9%B6%E4%B8%94%E8%83%BD%E5%A4%9F%E5%88%87%E6%8D%A2%E5%85%B6%E4%BB%96%E8%87%AA%E7%94%B1%E5%9D%97%E6%98%BE%E9%9A%90%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%B3%95)。  
-3. 实现高亮标题与下方图表的同步轮播变换。  +3. 实现局部内容的轮播，比如自定义的高亮标题与下方图表的同步轮播变换。  
  
  
 ##6. url传参过滤 ##6. url传参过滤
-url传参过滤是与第三方系统集成页面的一个核心功能，也是解决产品过滤控件样式有限的有效方法。  +url传参过滤是与第三方系统集成页面的一个核心功能，也是扩展过滤控件样式及交互模式的有效方法。  
 1. 第三方系统可以使用iframe嵌套dataviz图册，通过编码动态拼接iframe的url实现更新过滤条件的目的，详见[地址传参过滤](http://www.idataviz.com/doc/userguide/filter.html?h=%E5%9C%B0%E5%9D%80%E4%BC%A0%E5%8F%82), [sql参数的url传参](http://www.idataviz.com/doc/userguide/story_param.html?h=6.7.8%20Url%E4%BC%A0%E5%8F%82)。 1. 第三方系统可以使用iframe嵌套dataviz图册，通过编码动态拼接iframe的url实现更新过滤条件的目的，详见[地址传参过滤](http://www.idataviz.com/doc/userguide/filter.html?h=%E5%9C%B0%E5%9D%80%E4%BC%A0%E5%8F%82), [sql参数的url传参](http://www.idataviz.com/doc/userguide/story_param.html?h=6.7.8%20Url%E4%BC%A0%E5%8F%82)。
  
 ##7. 富文本 ##7. 富文本
-富文本的多种用途 +富文本的多种用途   
-1. 合并多个kpi，减少kpi的前端请求个数，快捷编辑多个kpi的排版布局。 +1. 合并多个kpi，减少kpi的前端请求个数，快捷编辑多个kpi的排版布局。   
-2. 用文字（用一堆空格做个悬浮层）配置超链接跳转，支持相对路径，支持当前页刷新、新打开页面或者弹出页面。 +2. 用文字（用一堆空格做个悬浮层）配置超链接跳转，支持相对路径，支持当前页刷新、新打开页面或者弹出页面。   
-3. 可嵌入图片，比如button图标，实现按键的跳转。+3. 可嵌入图片，比如button图标，实现按键的跳转。  
  
 缺点：对自适应不友好，嵌入的图片在导出项目后丢失。 缺点：对自适应不友好，嵌入的图片在导出项目后丢失。
  
 </markdown> </markdown>
/var/www/html-133/wiki/data/attic/1.bi与可视化saca.dataviz/5图册/5.19dataviz的灵魂功能.1630048569.txt.gz · 最后更改: 2021/08/27 15:16 由 admin

页面工具

除额外注明的地方外，本维基上的内容按下列许可协议发布： GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki