大数据可视化大屏图表设计经验，教给你！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大数据可视化大屏图表设计经验，教给你！相关的知识，希望对你有一定的参考价值。
参考技术A 自从跟大家分享第一篇 《大数据可视化大屏设计经验，教给你！》 ，很多小伙伴都会问我一些相关的问题，看了小伙伴给我发的视觉稿，整体都还不错，但是发现图表的设计都有一些问题，大家可能对数据可视化的图表设计经验少一些，所以这篇文章就挖掘一下图表的细节表现，分享我曾经遇到过的坑和对图表设计的理解。图表设计
图表设计概念
图表设计是数据可视化的一个分支领域，是对数据进行二次加工，用统计图表的方式进行呈现，也是数据可视化的核心表现，图表设计既要保证图表本身数据清晰准确、直观易懂，又要在找准用户关注的核心内容进行适当的突显，帮助用户通过数据进行决策。
下面分析三种常用的可视化图表设计：
折线图
折线图常用于表示数据的变化和趋势，坐标轴的不同对折线的变化幅度有很大的影响。
左图坐标轴设定的太低，折线变化过于陡峭，图中数值区间为（10-34）数据可视化的表现过于夸大了折线变化的趋势。
右图坐标轴的数值设定的太高，则折线变化过于平缓，无法清晰的表现折线的变化。
合理的折线图应当占据图表的三分之二的位置，图表的X轴数值范围应根据折线的数值增减变化而变化，这需要跟前端小哥哥小姐姐说明，做成动态计算。
折线图的折线粗细要合理，过细的折线会降低数据表现，过粗的折线会损失折线中的数据波动细节，视觉上较难精准找到折线点的相应数值！我通常用两个像素的线，看起来比较合适！
右图刻度线颜色过重，影响图表数据的表现，零基线跟图表内的刻度线对比不够明显，整体很乱。零基线是强调起始位置的，一般要比图表内的线颜色凸出一些。
条形图/柱状图
理想很丰满，现实很骨感。这个案例是我之前在工作中遇到的问题，数据进来后，被吓到了，问题的原因是没有跟前端小哥姐沟通好，他们把X轴写死，导致出现这种问题，其实应该情况要把这些图表的取值范围写成动态计算的。
例如，以现在数值范围为例，数据的最高值为18，X轴最高数值应该为25，当数据又上升一定的高度后，X轴再上升到相应的数值高度，这样避免了如右图的问题。
坐标轴的标签文字最好能水平排列， 当X轴标签文字过多时，不建议倾斜排列、上下排列、换行排列 文字多了这样的展示大大降低了阅读性！下图给出两个解决方案，大大提高标签文字的阅读性！
解决方案
柱子之间过于分散就会失去数据之间的关联性，过密就会变得数据之间没有独立性更不利于舒适阅读。
当柱子为n时，柱子直接的距离建议与n相差不要太大，柱子靠边的距离，最好是柱子之间的一半的距离，这样视觉上最为舒适。
饼图
左1图，不建议在饼图内与百分比数值一起显示，饼图本身的形状和大小，文字过多时容易溢出，如果出现一个2%一个1%，就很难辨别图形指向，这样也就失去了数据可视化的意义，PPT通常有这样的设计样式，因为是个死图。
左3图，人的阅读习惯是从左到右，从上到下，所以数据从大到小排列，更有助于阅读，图形也更具美感！
当饼图为检出率，或者一些重要信息检测的重点关注数据，就不建议大小数据顺时针排列，左1图这种情况一般很少出现，因为关注的是检出数值，展示未检出数据实为鸡肋，可能是极少情况的需要吧！
右图对于类似检出率的数据最为合适，直观清晰，没有无用数据干扰！
当饼图的标签维度过多时，就不适合把数据围绕饼图一周展示，会很乱，不易阅读，解决方案如右图！
图表分类图
分享一张图表分类大全，保存起来，设计数据可视化产品，会有重要参考价值！
这张图由设计师Abela对图表的各种特征进行了大致的概括总结。
大数据毕设/课设 - 数据大屏监控可视化设计与实现
文章目录
0 前言
Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！
今天要分享的是：数据大屏监控可视化设计与实现
1 介绍
大数据大屏可视化系列：数据大屏监控可视化设计与实现
可搭载任意自己想用的数据，动态效果不错
项目源码： https://download.csdn.net/download/Seniors_DC/85581807
2 实现效果
整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。
3 部分关键代码
particlesJS('particles-js',
"particles":
"number":
"value": 10,
"density":
"enable": true,
"value_area": 1200
,
"color":
"value": "#ffffff"
,
"shape":
"type": "circle",
"stroke":
"width": 2,
"color": "#000000"
,
"polygon":
"nb_sides": 5
,
"image":
"src": "img/github.svg",
"width": 100,
"height": 100
,
"opacity":
"value": .8,
"random": false,
"anim":
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
,
"size":
"value": 5,
"random": true,
"anim":
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
,
"line_linked":
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
,
"move":
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract":
"enable": false,
"rotateX": 600,
"rotateY": 1200
,
"interactivity":
"detect_on": "canvas",
"events":
"onhover":
"enable": true,
"mode": "repulse"
,
"onclick":
"enable": true,
"mode": "push"
,
"resize": true
,
"modes":
"grab":
"distance": 400,
"line_linked":
"opacity": 1
,
"bubble":
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
,
"repulse":
"distance": 200
,
"push":
"particles_nb": 4
,
"remove":
"particles_nb": 2
,
"retina_detect": true,
"config_demo":
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
);
function launchParticlesJS(tag_id, params)
var canvas_el = document.querySelector('#'+tag_id+' > canvas');
/* particles.js variables with default values */
pJS =
canvas:
el: canvas_el,
w: canvas_el.offsetWidth,
h: canvas_el.offsetHeight
,
particles:
color: '#fff',
shape: 'circle',
opacity: 1,
size: 2.5,
size_random: true,
nb: 200,
line_linked:
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode:
enable: true,
rotateX: 65000,
rotateY: 65000
,
anim:
enable: true,
speed: 1
,
array: []
,
interactivity:
enable: true,
mouse:
distance: 100
,
detect_on: 'canvas',
mode: 'grab',
line_linked:
opacity: 1
,
events:
onclick:
enable: true,
mode: 'push',
nb: 4
,
retina_detect: false,
fn:
vendors:
interactivity:
;
/* params settings */
if(params)
if(params.particles)
var paramsForParticles = params.particles;
if(paramsForParticles.color) pJS.particles.color = paramsForParticles.color;
if(paramsForParticles.shape) pJS.particles.shape = paramsForParticles.shape;
if(paramsForParticles.opacity) pJS.particles.opacity = paramsForParticles.opacity;
if(paramsForParticles.size) pJS.particles.size = paramsForParticles.size;
if(paramsForParticles.size_random == false) pJS.particles.size_random = paramsForParticles.size_random;
if(paramsForParticles.nb) pJS.particles.nb = paramsForParticles.nb;
if(paramsForParticles.line_linked)
var paramsForLineLinked = paramsForParticles.line_linked;
if(paramsForLineLinked.enable_auto == false) pJS.particles.line_linked.enable_auto = paramsForLineLinked.enable_auto;
if(paramsForLineLinked.distance) pJS.particles.line_linked.distance = paramsForLineLinked.distance;
if(paramsForLineLinked.color) pJS.particles.line_linked.color = paramsForLineLinked.color;
if(paramsForLineLinked.opacity) pJS.particles.line_linked.opacity = paramsForLineLinked.opacity;
if(paramsForLineLinked.width) pJS.particles.line_linked.width = paramsForLineLinked.width;
if(paramsForLineLinked.condensed_mode)
var paramsForCondensedMode = paramsForLineLinked.condensed_mode;
if(paramsForCondensedMode.enable == false) pJS.particles.line_linked.condensed_mode.enable = paramsForCondensedMode.enable;
if(paramsForCondensedMode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = paramsForCondensedMode.rotateX;
if(paramsForCondensedMode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = paramsForCondensedMode.rotateY;
if(paramsForParticles.anim)
var paramsForAnim = paramsForParticles.anim;
if(paramsForAnim.enable == false) pJS.particles.anim.enable = paramsForAnim.enable;
if(paramsForAnim.speed) pJS.particles.anim.speed = paramsForAnim.speed;
if(params.interactivity)
var paramsForInteractivity = params.interactivity;
if(paramsForInteractivity.enable == false) pJS.interactivity.enable = paramsForInteractivity.enable;
if(paramsForInteractivity.mouse)
if(paramsForInteractivity.mouse.distance) pJS.interactivity.mouse.distance = paramsForInteractivity.mouse.distance;
if(paramsForInteractivity.detect_on) pJS.interactivity.detect_on = paramsForInteractivity.detect_on;
if(paramsForInteractivity.mode) pJS.interactivity.mode = paramsForInteractivity.mode;
if(paramsForInteractivity.line_linked)
if(paramsForInteractivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = paramsForInteractivity.line_linked.opacity;
if(paramsForInteractivity.events)
var paramsForEvents = paramsForInteractivity.events;
if(paramsForEvents.onclick)
var paramsForOnclick = paramsForEvents.onclick;
if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false;
if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode;
if(paramsForOnclick.nb) pJS.interactivity.events.onclick.nb = paramsForOnclick.nb;
pJS.retina_detect = params.retina_detect;
/* convert hex colors to rgb */
pJS.particles.color_rgb = hexToRgb(pJS.particles.color);
pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
/* detect retina */
if(pJS.retina_detect && window.devicePixelRatio > 1)
pJS.retina = true;
pJS.canvas.pxratio = window.devicePixelRatio
pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
pJS.particles.anim.speed = pJS.particles.anim.speed * pJS.canvas.pxratio;
pJS.particles.line_linked.distance = pJS.particles.line_linked.distance * pJS.canvas.pxratio;
pJS.particles.line_linked.width = pJS.particles.line_linked.width * pJS.canvas.pxratio;
pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance * pJS.canvas.pxratio;
/* ---------- CANVAS functions ------------ */
pJS.fn.canvasInit = function()
pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
;
pJS.fn.canvasSize = function()
pJS.canvas.el.width = pJS.canvas.w;
pJS.canvas.el.height = pJS.canvas.h;
window.onresize = function()
if(pJS)
pJS.canvas.w = pJS.canvas.el.offsetWidth;
pJS.canvas.h = pJS.canvas.el.offsetHeight;
/* resize canvas */
if(pJS.retina)
pJS.canvas.w *= pJS.canvas.pxratio;
pJS.canvas.h *= pJS.canvas.pxratio;
pJS.canvas.el.width = pJS.canvas.w;
pJS.canvas.el.height = pJS.canvas.h;
/* repaint canvas */
pJS.fn.canvasPaint();
if(!pJS.particles.anim.enable)
pJS.fn.particlesRemove();
pJS.fn.canvasRemove();
launchParticles();
;
pJS.fn.canvasPaint = function()
pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
;
pJS.fn.canvasRemove = function()
pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
/* --------- PARTICLES functions ----------- */
pJS.fn.particle = function(color, opacity, position)
/* position */
this.x = position ? position.x : Math.random() * pJS.canvas.w;
this.y = position ? position.y : Math.random() * pJS.canvas.h;
/* size */
this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size;
if (pJS.retina) this.radius *= pJS.canvas.pxratio;
/* color */
this.color = color;
/* opacity */
this.opacity = opacity;
/* animation - velocity for speed */
this.vx = -.5 + Math.random();
this.vy = -.5 + Math.random();
/* draw function */
this.draw = function()
pJS.canvas.ctx.fillStyle = 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.opacity+')';
pJS.canvas.ctx.beginPath();
switch(pJS.particles.shape以上是关于大数据可视化大屏图表设计经验，教给你！的主要内容，如果未能解决你的问题，请参考以下文章