JDC莫奈数据可视化工程师认证01-我要当山贼王！

叫我小郭就好
290 阅读10分钟

报名地址: developer.jdcloud.com/training/jd…

献给读者，在下一直都觉得通过写文章总结知识的方式，来将自己总结的知识给他输出出来,如果说一个没有基础的小白都能够将我的文章读懂，并且通过读懂我的文章来做到和我一样的目的，那么我认为我的知识输出就是成功的。这也算是我个人实现自我价值的一种方式。还是那句话，如果文章有帮助到你,记得点赞转发哦,如果亲爱的你能够给这个卑微的作者点个关注的话,那么将是我的无上荣幸！

封面是VN啊,其实吧,我是某种程度上的狗吹,就是RNG的英雄联盟选手简子豪的粉丝,虽然我是S9正式开始玩英雄联盟这个游戏的,但是小狗就是一直节奏不断,然后我就通过这个途径我就认识了简自豪这个选手.那会亚运会冠军风光无限,我那会又不看比赛,别人说他8强16强32强什么的.又和我没关系,我看他上古时代VN的操作集锦确实是秀啊.不过打了这么多年了人老了也没办法.但是我虽然是他粉丝,我也从来没去他直播间刷过礼物,也没去正经看过这个虎牙代言人的直播.也没和黑子对过线,别人刷黑子白子我就是图一乐罢了.之所以选择VN来当这个栏目的封面女郎的话,还是因为这个英雄在英雄联盟中不怎么吃队友,反正你强就完事了,单排会玩就随便上分.正如这个专栏系列考证的预言一样,你把证考下来了,你就变强了.你无敌!希望看我的文章的读者无论有什么证,都给他一遍过了 哈哈

证书介绍

京东智能城市莫奈可视化平台数据可视化工程师认证（JCA）为京东智能城市莫奈可视化平台产品用户提供专业技术认证，该项认证内容为莫奈可视化平台的使用操作能力，是对从业人员或希望进入可视化行业人员的专业性技能认证。通过认证，帮助学习者了解京东智能城市莫奈可视化平台产品、服务和通用解决方案，掌握基本数据可视化相关知识与技能。参与考试者需提前报名，登录京东智能城市官方授权的考试链接完成考试。详情及合作邮件咨询: partner.icity@jd.com

认证证书

完成学习课程并通过认证考试即可获得京东城市官方权威认证证书，为您的技术实力提供强有力的证明。您的专业认证信息将被纳入京东城市技术能力认证库，支持查询认证信息。同时京东城市人才库也将同步您的信息，为您的职业发展护航，开辟招聘绿色通道，提供更多职场机会。

image.png

  • 适用人群：可视化相关从业者，前端工程师、数据工程师
  • 报名费用：19.9元
  • 考试形式：线上考试，2次考试机会
  • 考试时长：单次90分钟
  • 考试总分：100分
  • 考试题型：4单选+4多选+4判断+5问答
  • 通过条件：75分及以上
  • 认证有效期：自考证之日起2年有效

莫奈网址: 莫奈 (jdcloud.com)

莫奈

image.png

1.🚚大屏介绍

中间的区域为数据大屏管理区域,当用户拥有不同的控件时,可以通过切换又上角默认控件,来展示不同空间的数据大屏

我们可以点击新建数据可视化,新建大屏,这里我们可以选择预设好的大屏模板,或者新建空白模板,来新建大屏

image.png

针对已有的大屏,JD提供了删除,修改,复制,预览和发布5个按钮

  • 删除:通过点击删除按钮,对选中的大屏进行删除
  • 修改:通过点击修改按钮,对大屏的名称进行修改
  • 复制:通过点击复制按钮,可以将大屏复制到另外的空间去
  • 预览:通过点击预览按钮,可以预览已经创建好的大屏,必须要有登录过后的权限才能够对大盘进行预览
  • 发布:通过点击发布按钮,可以发布已经创建好的大屏到互联网上,在这个时候,你可以通过设置,设置访问你的数据大屏是否需要权限,并且获取token.

image.png

2.🚚按照UI稿还原大屏

我们知道,在项目交付中,往往需要通过根据UI设计稿来交付大屏设计的过程.这里就介绍更具UI设计稿设计大屏的基本步骤

  • 新建一个大屏,更具UI设计稿设计大屏尺寸;

image.png

  • 然后我们需要对设计稿上面的图片,与其对应的位置进行一一的对应.并且更具右侧样式设计调整大小.并且将本地的图片通过拖拽放入右侧背景图里面去:

image.png

image.png

最后实现效果如上

  • 更具设计稿给每块区域的图表加上描述和标题
  • 更具UI设计稿里面有哪些图表,将图表放到相应的位置.并且更具右侧对颜色和内容进行相应的微调,最后实现效果如下:

image.png

3.🚚如何使用Mysql数据库进行图表配置

image.png

我们往往需要引入各种不同地方,不同企业的API,对我们的数据进行开发,我们以最常见的数据库为例,用莫奈引入外部的Mysql数据源,为数据大屏做数据配置

  • 首先引入配置Mysql必要的配置源信息:

image.png

值得注意的是,无论是哪种数据源进行接入,我们最终查询的都是表级别的信息.

  • 进入数据源管理页面,点击新增数据源按钮,进入选择数据源页面,选择Mysql,进入配置数据源页面

image.png

image.png

接下来配置数据源好数据源,选择好数据库之后,我们的Mysql数据库就配置完毕,可以在数据大屏中使用了

  • 接下来我们要在配置页面给组件接入数据源,在上方的图表配置,新增一个柱状表,然后点击新增的柱状表,在右侧打开数据选项卡,将数据类型从静态数据改成数据库,选择Mysql,再选择我们刚刚配置的数据表,就可以看到下方更具查询SQL所列举出来的数据了.然后配置数据上方的维度数据,就可以将数据库中的数据和莫奈数据图表的数据绑定到一起了.

image.png

4.🚚Excel/CSV文件使用方式

当你有了一个Excel或者CSV数据后,你可以通过以下两种方式来对图表数据进行配置

  • 复制粘贴,你可以选中Excel或CSV之后,将其中的数据直接复制粘贴到图表的数据选项卡上的数据配置,完成图表区域的配置.
  • 通过新增数据源,选择Excel图表,通过传入的Excel数据对图表进行配置

image.png

在上传文件后,我们支持通过两种方式来对Excel或者CSV的数据进行查询:

  • 简单输入:在简单输入中,你可以通过添加筛选条件,来筛选你需要的数据,筛选条件支持常量和变量,输入变量时,需要使用":变量名称"的方式输入

简单输入的Tips:

  1. 多个筛选条件为"and"关系;
  2. Excel数据可以点击数据响应结果表格左上角的达到切换Excel中不同Sheet页的目的.当数据类型为CSV时就没有这个操作
  • 高级输入(即SQL)

Excel高级输入Tips:

  1. 上传Excel文件后,系统会将excel中的所有sheet均映射成对应的表,并以sheet的名称分别作为表名称
  2. 您的查询语句应该与此类似: select "列名A","列名B" from "某sheet页名称"

CSV高级输入Tips:

  1. 上传CSV文件后,系统会使用CSV的文件名称作为表名称;
  2. 您的查询语句应该与此类似: select "列名A","列名B" from "CSV的文件名"

5.🚚数据过滤器的使用

数据过滤器功能: 数据过滤器给用户提供了通过写JavaScript代码对已有数据进一步改造的能力,其中包括但是不限于对已有的数据格式进行转化或者对数据内容进行筛选.例如:在项目交付中,我们经常会通过已有的数据接口来提取数据

image.png

这些接口返回的数据与莫奈直接能使用的数据格式不一样,而后端改造数据接口的成本可能很高.这时,我们就可以使用数据过滤器功能.通过一个或者多个数据过滤器的组合使用,将原数据中取得的数据转化成为目标数据,并且提供给用户使用:

image.png

目前莫奈支持对数据库或者API获取的数据进行数据过滤

image.png

因此,我们打开并且新增一个数据过滤器,

image.png

并且在JavaScript函数中写return 将具体的数据返回回去,比如下面这个案例就是返回的data.data.info.

image.png 应用数据过滤器并且点击调试按钮,就可以看到我们对数据的调试结果,此时数据集合中已经返回了我们需要的数组格式的数据

image.png 最后,勾选开启数据过滤器选项,数据就能够正常的展示在组件上面了.

image.png 我们也可以对同一个数据源使用多个数据过滤器. 例如,在获取到当前数据后,我们希望对成绩为90分以上的同学再进行一轮筛选,那么就需要新增一个专门做筛选的程序过滤器

image.png 例如上面我们添加了一个对grade进行筛选的过滤器,应用并生效后,就获得了所有成绩为90分以上的同学的数据.

6.🚚收藏功能的几种用法

在大屏使用中,我们经常能遇见一些样式精美的组件或者组件组,为了方便后期对这些组件进行复用,您可以通过组件收藏功能,对大屏中任意的组件或者组件组进行收藏.

image.png 在画布编辑区或者页面的图层栏选中某一个组件,右键选择收藏即可完成对单一组件的收藏.在左侧图层区右键点击收藏,即可对单一组件组完成收藏.

在收藏成功之后,可以在大屏编辑器的收藏菜单栏下,可以通过点击已收藏的组件或者组件组对齐进行调用.同时菜单栏还提供了对已收藏组件的搜索或者重命名和删除功能.

image.png

海克斯科技飞门

  • 下篇文章地址:

参考文献:

avatar
文章
阅读
粉丝