关于数据可视化页面制作

先出思路

数据可视化,目的是为了让纷繁的数据变得直观,更易领会数据代表的趋势、模型等。既然是带着目的的,应先把目标明确下来。目标写下来,思想上算落地了,那么就能给大脑腾出继续深入或扩展的空间。所以,写下目标就有进度,就可完善,从而最终可体系化。而相反,则可能让精力耗尽且仍止步于或局限于某几个点!

可视化之前,你应该先构思,而不是先找模板。但平时可以在看到一些上眼的可视化页面时多多观察!

关于可视化

完成最终的可视化,要解决三个问题
(1)维度:即要展现数据的哪些侧面,它也一定程度上决定了使用的图表类型(外观)。
如,一维的某一方面单一的统计结果,或是百分比等。
577842-20190620153729179-602827452.png

多维的按地区、按月的相关数据,同比环比等。
577842-20190620153742450-395145835.png
577842-20190620153748877-114731895.png

(2)图表布局,表意,自适应,全屏,支持事件。
可视化屏通常在较大的宽屏上显示,通常会用一个业务相关的大背景衬托。然后根据实际情况,可以考虑分几列,其中,中间留一大块做热点图或综合性辐射图等。具体形式则不限于此,事实上,色调搭配合理,重点突出即可。
为了能在多场景下使用,可一定程度的做好屏幕自适应。
对于地图或有必要进一步展开的重点信息,可以增加相关触发事件,如鼠标移动、点击等,进行数据浮动显示,或跳转,或是更新相关联版块数据等。
577842-20190620153800380-974203935.png

(3)数据加载机制:数据来源,更新机制等。
在可视化界面上,往往有多个维度的数据,而且动态的计算量也是比较大的,这可能导致两个问题。
1.演示页面的加载速度问题
2.数据获取的稳定性问题
针对第1个问题,基本思路是数据应该提前准备在缓存中,首次加载直接从缓存中取数据。对于单页应用,还可以提前直接将数据更新到本地静态文件中,做到可离线展示。数据获取的稳定性,主要是做好容错处理。同时,不同的场景对数据动态的实时性要求不一样,关键是抓好几个相关的重要指标。

图表原则

突出关注点,突出优势,适当存在复杂度高的图表。
(1)始终要围绕目标,突出要关注的数据。
(2)要突出优势,数据可视化有一种重要的职能就是作展示用,对于能代表自身优势的指标要加以强调。
(3)适当的在局部加上复杂度相对较高的图表,这些图表即有务实的意义(多个维度综合展示),又有务虚的一面,更显专业。
577842-20190620153813678-1623026415.png

推荐图表

个人推荐使用 ECharts,图表全面,文档齐全,示例丰富。其官方网站为:https://echarts.baidu.com/
示例站点为:https://echarts.baidu.com/echarts2/doc/example.html

577842-20190620153825501-1229369644.png

推荐一些模板资源

可以从以下链接下载到一些模板,这个资源已下载验证过,其中几套模板还不错,可以参考一下:
https://download.csdn.net/download/qiangbaixiao/10833443
如果积分不够,也可以关注“时间维度”公众号,留言后可直接发。

转载于:https://www.cnblogs.com/timeddd/p/11013393.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/350316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GitHub Research:超过50%的Java记录语句写错了

为什么生产日志无法帮助您找到错误的真正根本原因? 询问您是否使用日志文件监视您的应用程序几乎就像询问…您是否喝水。 我们都使用日志,但是我们如何使用它们则是一个完全不同的问题。 在下面的文章中,我们将对日志进行更深入的研究&…

matlab rgb2gray的实现

rgb2gray是matlab内部一种处理图像的函数,通过消除图像色调和饱和度信息同时保留亮度实现将将RGB图像或彩色图转换为灰度图像,即灰度化处理的功能,调用这个功能的格式是I rgb2gray(RGB),意思是将真彩色图像RGB转换为灰度强度图像…

8k分辨率需要多大带宽_又一支持8K分辨率的接口标准发布

随着8K显示热潮的兴起,支持8K视频传输和显示的硬件产品越来越多。继之前发布的HDMI2.1标准之后,又一支持8K分辨率视频传输的接口标准DisplayPort 2.0正式发布。视频电子标准协会(VESA)自推出DisplayPort标准之后,历经了多次的修订&#xff0c…

白话解说TCP/IP协议三次握手和四次挥手

白话解说TCP/IP协议三次握手和四次挥手 1、背景 和女朋友异地恋一年多,为了保持感情我提议每天晚上视频聊天一次。 从好上开始,到现在,一年多也算坚持下来了。 1.1、问题 有时候聊天的过程中,我的网络或者她的网络可能会不好&…

matlab 去除pdf文档水印

1用pdf shaper将pdf转为图片; 2用matlab程序去水印代码如下; 3将去除水印的图片通过pdf shaper转为pdf. 1_1.jpg为要去除水印pdf文档 2_1.jpg为空的pdf文档 test_1.jpg为去除水印的图片 img_1 imread(1_1.jpg); img_2 imread(2_1.jpg);img_3 img_2-img_1; img_4 255-i…

音频信号发生器_1957年,DIY的Hi-Fi 电唱机单电子管音频发生器的音质保真度高...

1957年Hi-Fi 电唱机单电子管音频发生器也许你的MP3播放器听起来比62年前这位绅士的高保真转盘听起来要好一些,但我打赌不太可能自己动手DIY一台MP3播放器,就像下面这个家伙那样。在1957年版的《Radio-TV Experimenter》的封面上显示的这个产品是个DIY产品…

tensorflow 启动Session(tf.Session(),tf.InteractivesSession(),tf.train.Supervisor().managed_session() )

(1)tf.Session() 计算图构造完成后, 才能启动图. 启动图的第一步是创建一个 Session 对象。 示例程序: #coding:utf-8 import tensorflow as tf #构造图 a tf.constant(4) b tf.constant(5) c ab#启动图 with tf.Session() as s…

终极Java日志字典:开发人员最常记录的单词是什么?

最终的记录字典,或者:我们记录的最常用单词是什么? 日志文件是调试应用程序的最常用方法,在解决错误时,它们一定可以引导我们朝着正确的方向发展。 但是,大多数日志文件每天都会增加一百万条消息&#xff…

iwrite提交不了作业_iWrite英语写作教学与评阅系统移动端——学生使用手册

通过微信搜索公众号:iWrite爱写作,点击“关注”。一、注册iWrite英语写作教学与评阅系统移动端首页底端显示“登录”按钮。首次关注,点击“登录”按钮,页面跳转至登录/注册界面。点击“注册账号”按钮,即可跳转至注册界…

阻塞IO与非阻塞IO

阻塞IO:操作系统等数据,只发生了一次调用,最大问题:cpu被耽搁了 非阻塞IO:问题:1、发生多次系统调用 2、数据不及时 IO multiplexing model io多路复用,多一个系统调用,但可以建…

matlab的输出(命令窗口、fprint函数、disp函数)

命令窗口直接输出,MATLAB的默认格式是精确到小数点后4位。如果一个数太大或太小,那么将会以科学记数法的形式显示。比如: format stytle 改变默认输出格式要用到format命令,可根据下表改变数据的输出格式 显示数值格式 Stytle …

g2 折线图点与点之间直线_科学网—ggplot2实现散点折线图 - 肖斌的博文

准备的数据:第一列是时间,第二列是样本,第三列是具体数值。横轴标为时间,纵坐标为具体数值,图中不同颜色展示不同样本。具体的代码:library(ggplot2)png("./xyz.png")(保存成png)upsups$date pde…

matlab 字符串处理

% 字符串处理 a a;bb b;ccccc;m % 获取字符串长度length(a) % 连接两个字符串,每个字符串最右边的空格被裁切 dstrcat(a,c) length(d) % 连接多行字符串,每行长度可不等,自动把非最长字符串最右边补空格 % 使与最长字符串相等,会忽略空字符串 est…

【c#基础】泛型

1:减少代码的选项可以是用Object类,也可以使用泛型 但是Object类进行类型传递不是类型安全的。泛型类使用泛型类型保证了类型安全。 泛型类 泛型方法 泛型接口、结构、委托 泛型优点: 1:性能 装箱和拆箱很容易使用,但性能损失比较…

nacos怎么修改服务分组_nacos服务注册如何配置分组?

同问,度娘一番,没找到答案,最终看的代码,大概知道怎么回事了。这个是下面引用源码的版本org.springframework.cloudspring-cloud-starter-alibaba-nacos-discoverycom.alibaba.nacosnacos-client0.2.2.RELEASEcom.alibaba.nacosna…

使用brew,cask和jenv在MacOSX上设置多个Java JRE / JDK

昨天在Java9的Jigsaw HackTheTower事件中,我意识到我需要加强我的游戏并改善我现有的机制,以在我的机器上维护几个不同的JDK。 我曾经手动下载jdk,或使用brew cask安装它们,我会在〜/ bash_profile上设置bash alias来在不同的 JA…

Codeforces - 102222C - Caesar Cipher

https://codeforc.es/gym/102222/my 好像在哪里见过这个东西&#xff1f;字符的左右移还是小心&#xff0c;注意在mod26范围内。 #include<bits/stdc.h> using namespace std; typedef long long ll;inline int read() {int x0;int f0;char c;do {cgetchar();if(c-)f1;} …

python os.path.exists判断文件或文件夹是否存在

import os#判断文件夹是否存在 dir os.path.exists(C:\\Users\\Desktop) print(dir:, dir)#判断文件是否存在 file os.path.exists(C:\\Users\\Desktop\\雍正王朝.txt) print(file:, file)运行结果 显示该文件及文件夹都存在

vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...

项目需求&#xff1a;图片加载时&#xff0c;当鼠标滚动至当前图片进行加载并加上上滑特效&#xff0c;实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较。但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空&#xff0c;导致图片位置计算出问题。解决这…

微服务(Microservices)和服务网格(Service Mesh)架构概念整理

微服务&#xff08;Microservices&#xff09; 在过去的 2016 年和 2017 年&#xff0c;微服务技术迅猛普及&#xff0c;和容器技术一起成为这两年中最吸引眼球的技术热点。而以 Spring Cloud 为代表的传统侵入式开发框架&#xff0c;占据着微服务市场的主流地位。 微服务&…