后台产品的数据可视化图表产品设计
前些天，做后台的数据⼦系统的时候，需要⽤到⼀些可视化的数据图表，我⽤到了⼀个⾃认为效果⽐较好，⽽且⽐较⽅便的⽅式来实现。
在⽹上巴拉巴拉地了⼀番，⽬前⽤到这种⽅法来做数据图表的⼈并不多，我给⾝边的朋友介绍了⼀番，在这⾥也给⼤家分享⼀下。
做产品经理的过程中，后台的产品做了不少，画可视化图表总共经历了三个不同的阶段，分别是：①表格截图；②Axure钢笔⼯具；③Axure元件。
⼀、使⽤钢笔⼯具制作数据可视化图表
Excel表格基本上每个⼈必备的基本计算机操作，在这⾥就不啰嗦了。在讲Axure元件实现数据可视化之前，先简单说说通过Axure钢笔⼯具来实现的⽅式。
会PS的⼈应该都会知道Photoshop⾥⾯有个钢笔⼯具，主要⽤来勾勒⼀些不规则的轮廓以及勾勒线条或者抠图。Axure从8.0版本开始，也加⼊了钢笔⼯具以及切图等功能，我⽤得最多的就是使⽤钢笔⼯具来画各种线条（曲线图）。Axure的钢笔⼯具其实和PS⾥⾯的钢笔⼯具有⽐较多的相似之处。
说⼏个使⽤Axure钢笔⼯具的时候需要注意的点：
1、使⽤钢笔⼯具时，在完成最后的点的描绘的时候，需要按键盘左上⾓的【Esc键】完成绘制；
2、完成绘制的时候，可能很多朋友还看不到线条，那是因为钢笔⼯具的线条粗细默认是None的，也即是没有线条的，
因此在线条粗细那⾥设置⼀下即可。
⼆、利⽤Axure框架嵌⼊可视化页⾯
折线图以及柱形图直接在Axure上完成也并不难，但是如果要⽤到圆饼图、环形图、漏⽃图等更加多样化的数据可是图表，那就⽐较⿇烦了。
有些⼈会使⽤antv、echarts、HighCharts等可视化⼯具来制作可视化数据图表。
使⽤这种⽅法来实现数据可视化的步骤如下：
1、进⼊antv、echarts、HighCharts等任意⼀个可视化⼯具的官⽹，到对应的可视化图表；
2、将数据可视化图表的前端代码拷贝下来，在代码编辑器中修改成⾃⼰想要的数据指标以及数据项，并保存为.html⽂
件；
3、将⽣产的.html⽂件放到要⽣成Html原型的⽂件夹中；
3、在原型中，拖⼊⼀个【内联框架】-选择框架⽬标-链接到URL或者⽂件-选择上⼀步所保存的.htm路径⽂件；
4、⽣成Html原型。
如果对代码⾮常头疼的产品经理，使⽤这种⽅法来做的话，⽆疑是增加负担。
三、使⽤Axure元件快速制作可视化图表
有那么⼀些⼈，已经将Axure⽤得⾮常熟练了，加上懂点技术，于是⼀个数据可视化图表制作的元件就诞⽣了——Axhub
Charts图表元件。这个元件的使⽤⽅法和我们常⽤的元件差不多，都是直接拖拽到内容区域进⾏处理即可。不过该元件⽐其他普通的元件稍微复杂⼀些。元件使⽤了1个矩形+2个中继器来实现，并且还需要在原型中加载JS代码（说到代码的时候不⽤⽅，元件的作者已经把需要代码处理的地⽅处理好了，使⽤者不需要懂代码）。我⼤致猜测⼀下这个元件的实现原理，如果不对，欢迎拍砖。矩形的作⽤是设置图表的宽⾼尺⼨的，第⼀个中继器的作⽤是设置横坐标以及统计指标（曲线、柱形、扇区等），因为中继器的列名不能够使⽤中⽂命名，元件的作者为了能够满⾜⼤家的个性化需求，因此⽤第⼆个中继器来设置是否显⽰坐标轴、图例标记、主题颜⾊等。第⼀个中继器做了⼀个⽤例，使⽤的是JS的⽅式加载作者放在服务器上的资源（html代码和JS代码）——javascript:{$axure.utils.loadJS('static.axhub.im/charts/axhub.0.1.0.js');}。
元件中有详细的说明以及常见问题解释，元件是结合了阿⾥的Antv数据可视化⼯具来做的，使⽤的时候，步骤如下：
1、将元件拖拽到Axure的内容区，并根据需要调整元件的宽⾼尺⼨，图表显⽰出来的⼤⼩就是元件的宽⾼尺⼨；
2、修改axhub-line-data这个中继器的数据集，修改前可预览看看预设的数据是怎么显⽰的再作修改，⼀般况下，列名
和⾏分别表⽰着柱形或者线条和横坐标内容（列名只能够是英⽂或者拼⾳，不能够输⼊中⽂）；
3、基本上完成以上两步即可，如果有其他的个性化需要，可在axhub-line-config中设置。
4、⽣成Html原型或者预览，都可以看到动态的图表（必须在有⽹络的情况下才能够看到图表，因为原型需要加载在线的
antv或echarts的库⽂件来渲染图表）。
⼯具只是为了提⾼效率⽽已，在使⽤的过程中，不必想着花⼤量的时间去将原型做得多好多炫，当然，如果⾃⼰⾮常熟练了，或者很多东西都已经元件化了，在不影响效率和进度的情况下，把原型做
ps切图尺寸变小得更完美⼀些也⽆可厚⾮。
以上是关于后台产品的数据可视化图表产品设计的⼀些⽅法以及⼯具，需要Axhub Charts图表元件的童鞋，可以到（zuopmcom）中回复“图表”获取下载链接。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。