百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

最好用的数据可视化图表制作工具推荐

ccwgpt 2024-10-21 04:05 57 浏览 0 评论

  数据可是化在我们日常生活中越来越重要了,所以很多场合场景都需要通过可视化的一些数据来展示场景效果,那么这些可视化图表如何制作呢?

  其实制作可视化图表是比较简单的,完全可以通过工具实现,下面小编给大家介绍几个制作可视化图表的工具,分别是:表格截图、Axure图形绘制、Axure网页框架和Axure第三方元件。

  

  一、使用Axure图形绘制可视化图表

  Excel表格基本上每个人必备的基本计算机操作,在这里就不做演示了,先简单说说Axure图形绘制可视化图表。

  通过axure自带一些图形控件,可以轻松地通过改变形状、大小、颜色来调整需要实现一些简单的图表样式,如柱状图。

  

  用过PS的人应该都会知道Photoshop里面有个钢笔工具,主要用来勾勒一些不规则的轮廓以及勾勒线条或者抠图。Axure从8.0版本开始,也加入了钢笔工具以及切图等功能,Axure的钢笔工具其实和PS里面的钢笔工具有比较多的相似之处。所以当绘制一些折线图时,可以通过Axure的钢笔工具完成。

  

  说几个使用Axure钢笔工具的时候需要注意的点:

  使用钢笔工具时,在完成最后的点的描绘的时候,需要按键盘左上角的【Esc键】或【双击鼠标】完成绘制;绘制时可以添加一些辅助线,帮助定位点不偏移。

  完成绘制的时候,可能很多朋友还看不到线条,那是因为钢笔工具的线条粗细默认是none的,也即是没有线条的,因此在线条粗细那里设置一下即可。

  二、利用Axure框架嵌入可视化页面

  对于一些比较麻烦的图表我们要怎么做呢,如圆饼图、环形图、漏斗图等更加多样化的数据可视化图表或是给图表加上一些特效,该怎么办呢?

  可以使用antv、echarts、HighCharts等可视化工具来帮你制作可视化数据图表。

  使用这种方法来实现数据可视化的步骤如下:

  进入antv、echarts、HighCharts等任意一个可视化工具的官网(百度以上关键词即可)找到对应的可视化图表;

  

  将数据可视化图表的前端代码拷贝下来,在代码编辑器中修改成自己想要的数据指标以及数据项,复制到文本文件中并保存为.html文件;

  将生产的.html文件放到要生成Html原型的文件夹中;

  

  在原型中,拖入一个【内联框架】-选择框架目标-链接到URL或者文件-选择上一步所保存的.htm路径文件;

  生成Html原型:

  

  相对来说这种方式可以实现非常多的效果和样式,实现起来也比较方便快速,但如果对代码非常头疼的产品经理,无疑是增加负担。加上每增加、修改一个图表都需要来回复制代码,生成文件使用这种方法来制作,在后期的维护和修改上,并不灵活和方便,这种情况,可以考虑下面一种方法。

  三、使用Axure元件快速制作可视化图表

  这个元件的使用方法和我们常用的元件差不多,直接拖拽到内容区域进行处理即可。

  不过该元件比其他普通的元件稍微复杂一些,元件使用了1个矩形+2个中继器来实现,通过加载组件库中的JS代码,呈现图表效果,(说到代码,元件的作者已经把需要代码处理的地方处理好了,使用者不需要懂代码)。

  

  矩形的作用是设置图表的宽高尺寸的,第一个中继器的作用是设置横坐标以及统计指标(曲线、柱形、扇区等),因为中继器的列名不能够使用中文命名,元件的作者为了能够满足大家的个性化需求,因此用第二个中继器来设置是否显示坐标轴、图例标记、主题颜色等。

  元件中有详细的说明以及常见问题解释,结合了阿里的Antv数据可视化工具来做的,使用的时候,步骤如下:

  将元件拖拽到Axure的内容区,并根据需要调整元件的宽高尺寸,图表显示出来的大小就是元件的宽高尺寸;

  修改axhub-line-data这个中继器的数据集,修改前可预览看看预设的数据是怎么显示的再作修改,一般况下,列名和行分别表示着柱形或者线条和横坐标内容;

  基本上完成以上两步即可,如果有其他的个性化需要,可在axhub-line-config中设置,非常方便!

  生成Html原型或者预览,都可以看到动态的图表,必须在有网络的情况下才能够看到图表,因为原型需要加载在线的antv或echarts的库文件来渲染图表,当然你也可以把渲染库下载到本地,修改图表元件库的指向链接就可以了。

  以上是小编为大家介绍的可视化图表制作工具介绍。

相关推荐

公司组织架构及部门职责#管理制度 #薪酬绩效 #组织架构

...

终于把“公司组织架构与管理部岗位配置”整理好了,拿来即用!

...

老板看完这份“公司组织架构详解”就解放了!

...

丨公司丨公司大架构整理汇总

注:本文转自团队成员原创作品,特此鸣谢(公号:法海图鉴)今日话题公司大架构整理背景介绍经过前几期话题对各种企业类型的介绍,想必大家已经有了初步认识。之后我将带着大家开启对公司的深入了解。本期...

图解物理--八年级物理下册最全知识框架导图

第七章力1力2弹力3重力第八章运动和力1牛顿第一定律2二力平衡3摩擦力第九章压强1压强2液体压强3大气压强4流体压强与流速的关系第十章浮力1浮力2阿基米德原理3物体的浮沉条件及应用第十一章功...

八年级上册生物,思维导图,期末高分必备资料,家长收藏

这是八年级上册生物的思维导图,孩子在背诵知识点的时候,可以看一下知识点在导图中的位置,形成对知识点整体的把握,有助于学生拿高分,特别是图片中带红色星星的部分,更是要注意背诵,是重点内容。家长可以把图片...

2019政府工作报告精华,这张思维导图里全都有

每经记者:李可愚每经编辑:陈星每日经济新闻

图解薪酬体系结构设计

...

司考复习独家总结!一张图总结行政法知识结构体系

作为三大实体法之一,行政法的分值在60分左右,行政法在司法考试中一直比较平稳常规,没有偏题怪题,还是比较容易得分的。小编要提醒大家,在3月之前要把三大实体法学习一遍。下图是厚大在线360导学师小周总结...

一图读懂香港国安新架构:各职位人选公布 有官员曾强硬喊话乱港分子

实用干货!高中物理框架图,让零碎知识“串联”起来

高中物理学习一定要抓好逻辑结构大框架!了解整个知识框架体系后,更易抓住骨干知识,干掉重难知识点~今天给大家分享高中物理的框架图同学们赶紧收藏起来吧!力学知识结构图光学知识结构图热学、原子物理知识结构图...

254m超高层办公楼型钢砼框架-核心筒结构图

高度类别:超高层建筑钢筋混凝土结构:框架,框架核心筒钢结构:钢框架建筑功能:办公包含:办公楼57层(-3层)254.150m钻孔灌注桩桩+筏板型钢混凝土框架-钢筋混凝土核心筒西裙房2层(-...

砖混结构与框架结构,究竟有何区别?千万别被坑!

现在买房装修的人最怕啥?不是价格高,而是房子不安全!两种主流建筑结构,砖混靠墙,框架靠柱子,选错了隔墙都可能要命。简单说,砖混便宜但别碰高层,框架贵点但能保命。砖混那些承重墙根本不能拆,想砸墙改个开放...

大师一百——高中化学必考:《元素周期律》考点框架图

今天大师给大家带来的是高中化学的《元素周期律》考点框架图,高中的同学必须牢记于心,这种重要的考点,考试是一定会考的!化学大师...

需求分析框架图

需求分析框架图

取消回复欢迎 发表评论: