Klipfolio - 数据可视化工具

- 日理万妓 2023-02-11 07:18 5阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于分析数据，可视化。 发现真正的价值和洞察力, 一款高质量的可视化工具. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 背景： 目前所在公司项目采用的数据分析呈现工具，公司产品是分布式架构，监控/数据分析是必不可少的。 &nbsp; 1.介绍 维基百科：<a href="https://en.wikipedia.org/wiki/Klipfolio_dashboard" rel="nofollow">https://en.wikipedia.org/wiki/Klipfolio_dashboard</a> 官网：&nbsp;<a href="https://www.klipfolio.com/" rel="nofollow">https://www.klipfolio.com/</a> url:&nbsp;<a href="https://app.klipfolio.com/" rel="nofollow">https://app.klipfolio.com/</a>&nbsp; //需要登录方可使用[付费产品] 简单来说：//翻译 Klipfolio提供了一个用于构建实时业务仪表板的在线仪表板平台。它允许业务用户连接到许多数据服务，自动化数据检索，然后操作和可视化数据。Klipfolio使用了一种无模式的体系结构，它允许非技术最终用户更容易地连接到数据源，并将数据从表示中分离出来，以便在整个平台中更有效地使用和重用数据源。 Klipfolio具有内置的公式编辑功能，允许终端用户在可视化任何数据之前对其进行转换、组合、切片和过滤。用户可以从桌面、平板电脑、电视和移动电话访问仪表板，并通过授权访问仪表板或调度电子邮件报告与同事共享仪表板。 &nbsp; 个人认识[目前]： Klipfolio支持从多种数据源获取数据，然后以人性化[可视化]展示数据. 便于数据的分析,从而分析数据的价值. 支持的数据源： &nbsp; <img alt="" height="575" src="https://img-blog.csdnimg.cn/20200527120349749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="605"> <img alt="" height="630" src="https://img-blog.csdnimg.cn/20200527120428610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="612"> <img alt="" height="605" src="https://img-blog.csdnimg.cn/20200527120503509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="613"> <img alt="" height="766" src="https://img-blog.csdnimg.cn/20200527120610584.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="601"> 等等...还有其他的，几乎都支持[国外服务/产品]。 &nbsp; 附加选项：//总之，功能很强 <img alt="" height="423" src="https://img-blog.csdnimg.cn/20200527120856224.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="455"> &nbsp; 侧边栏： <img alt="" height="943" src="https://img-blog.csdnimg.cn/20200527121210858.png" width="269"> &nbsp; &nbsp; 整体界面： <img alt="" height="316" src="https://img-blog.csdnimg.cn/20200526172038768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="883"> &nbsp; 2.初步使用 这里使用的数据源： Google Drive 新建Data Source <img alt="" height="254" src="https://img-blog.csdnimg.cn/20200527121850415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="544"> 可以搜索：Google Drive <img alt="" height="410" src="https://img-blog.csdnimg.cn/20200527121756295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="934"> 点击"Google Drive"，出现如下： 2.1 创建连接 连接一个账户 <img alt="" height="222" src="https://img-blog.csdnimg.cn/20200527122052170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="618"> 点击 "Connect an account", 出现如下：点击Google账号&nbsp; //这里并没有使用个人账号， 而是公司所给账号 <img alt="" height="549" src="https://img-blog.csdnimg.cn/20200527122458167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="456"> 并且Apply即可. <img alt="" height="356" src="https://img-blog.csdnimg.cn/20200527122743397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="572"> 或者&nbsp;Connect new account <img alt="" height="242" src="https://img-blog.csdnimg.cn/20200527122616107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="508"> <img alt="" height="224" src="https://img-blog.csdnimg.cn/20200527122823475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="599"> 2.2&nbsp;Configure your data source //配置数据源 <img alt="" height="237" src="https://img-blog.csdnimg.cn/20200527123151798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="631"> 选择文件//即点击"Choose File"&nbsp;&nbsp; <img alt="" height="430" src="https://img-blog.csdnimg.cn/20200527141438637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="638"> 这里选择的是skytest <img alt="" height="357" src="https://img-blog.csdnimg.cn/20200527141813869.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="671"> 点击"Continue"，出现如下：书写上面的信息，选择刷新频率，这为5分钟， 并且分给合适的组。 <img alt="" height="556" src="https://img-blog.csdnimg.cn/20200527142335977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="668"> 点击"Save" 并且修改后的数据如下： <img alt="" height="397" src="https://img-blog.csdnimg.cn/2020052714290764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="830"> &nbsp; <img alt="" height="391" src="https://img-blog.csdnimg.cn/20200527143101928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> 2.3 Create a Klip //Data Source 已经配置完毕 <img alt="" height="181" src="https://img-blog.csdnimg.cn/20200527153408990.png" width="532"> 点击'Create a Klip', 如下： <img alt="" height="371" src="https://img-blog.csdnimg.cn/20200527153513408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="702"> 拖拽式构建，具体过程就省略，可自行结合情况发挥. 提点： Klip为根节点，类似于dom文档编辑的打开开发者工具,进行元素相互定位，修改样式&nbsp; //其实本质上就是dom操作. <img alt="" height="214" src="https://img-blog.csdnimg.cn/20200527155707898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="313"> &nbsp; 随意操作一波: <img alt="" height="458" src="https://img-blog.csdnimg.cn/20200527172144363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="847"> 之后优化如下:&nbsp; //涉及到类同Excel的操作,以及变量的使用, 事件的使用 <img alt="" height="502" src="https://img-blog.csdnimg.cn/20200611114855948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="861"> 备注: 使用变量: <img alt="" height="354" src="https://img-blog.csdnimg.cn/20200611122445818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="821"> //求平均值 AVERAGE( AVERAGE(&amp;'2b3f7a28'), AVERAGE(&amp;'5ad1b9df'), AVERAGE(&amp;'9dfe9c3b'), AVERAGE(&amp;'85386f64') ) &nbsp; &nbsp; &nbsp; 3. 如何在clip中使用html组件以及自定义组件 <a href="https://support.klipfolio.com/hc/en-us/articles/215545798-How-to-build-HTML-Template-components?query=javasc" rel="nofollow">https://support.klipfolio.com/hc/en-us/articles/215545798-How-to-build-HTML-Template-components?query=javasc</a> &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://www.klipfolio.com/" rel="nofollow">https://www.klipfolio.com/</a>&nbsp; &nbsp;//官网 <a href="https://cloud.tencent.com/developer/article/1464155" rel="nofollow">https://cloud.tencent.com/developer/article/1464155</a> //十大顶级大数据可视化工具 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...