15分钟学会职场图表数据报表制作教程

[视频介绍](https://www.bilibili.com/video/BV1U2YqzHEms/?vd_source=639d9ff3c51c15486dec981618a6f164) 本篇文章将大家分享如何只花15分钟的时间就能制作出一个完美的dashboard(常常称做仪表盘、数据报表),并且你不需要在Excel上进行复杂的操作,更不需要使用到power bi这种专业但难以上手的工具。你只需要准备好你的数据表格即可。 ## 大纲 - 表格转图表:第一步我会教大家如何把表格转换成对应的图表,比如柱状图、折线图。 - 搭建dashboard:第二步我会教大家如何把这些图表组合起来变成一个dashboard。 ## 准备数据和工具 首先为了演示我准备了四份表格: ![表格数据](blog/res/blog_make_a_dashboard/1.png) 接下来我们会把这四份表格分别转换成对应的图表。这里我们需要用到一个应用,它可以很方便的制作出非常精美的图表,你可以在APP store里面去找到它。 - **该应用既有MacOS版本,也有iOS版本**,所以是三端通用的(iPhone/iPad/Mac) - **该应用支持英文、中文、法语、德语等等**,本次演示会将应用设置为英文模式。 ![应用入口](blog/res/blog_make_a_dashboard/3.png) ![三端通用](blog/res/blog_make_a_dashboard/三端通用.png) 在应用的右上角有一个table的入口,在这里我们可以把一个Excel文件给导入进来。可以看到截图的4张表格都已经导入到应用里面。 ![导入入口](blog/res/blog_make_a_dashboard/2.png) ![导入按钮](blog/res/blog_make_a_dashboard/5.png) ![导入结果](blog/res/blog_make_a_dashboard/4.png) ## 表格转换为图表 点击“To chart”按钮就可以把表格转换成一个图表: ![转换按钮](blog/res/blog_make_a_dashboard/6.png) 这里有很多类型的图表可以生成,我们想要生成的是柱状图,那就选择柱状图。选择完成后会进入一个编辑页面,我们可以对柱状图进行一些调整,比如调整纵坐标的数据。在调整完之后左边的预览窗口会实时刷新。 ![转换结果](blog/res/blog_make_a_dashboard/8.png) ![图表编辑](blog/res/blog_make_a_dashboard/7.png) 然后切换到values的窗口,在这里我们可以修改每一个维度的数值,比如由于现在是8月份,后面四个月的数据还没有,那么我们可以先填上预测的数据,点击保存之后修改的数据就会刷新。 ![修改图表](blog/res/blog_make_a_dashboard/9.png) 你还可以修改柱状图的颜色,比如想高亮数据值最高的那一个月,并且把最后4个月的颜色变浅,那么就可以针对每一个月份分别设置显示的颜色。 ![修改颜色](blog/res/blog_make_a_dashboard/10.png) ![修改颜色](blog/res/blog_make_a_dashboard/11.png) ## 图表外观定制并导出图片 接下来是最后一步,就是调整柱状图的外观,这也是这个应用的强大之处,它支持非常多的外观属性,可以尽情发挥想象力。 ![定制外观](blog/res/blog_make_a_dashboard/12.png) 最后你需要把图表保存下来,实际上也可以直接把这个图表导出为一张图片,并且图片非常高清。 ![导出图表](blog/res/blog_make_a_dashboard/13.png) 最后你可以在应用的template页面找到你刚刚制作的图表。接下来我们需要把剩下的三张表格也转换成图表,它们的做法和之前一样,这里不再赘述。 ![雷达图制作](blog/res/blog_make_a_dashboard/14.png) ![柱状图制作](blog/res/blog_make_a_dashboard/15.png) ![曲线图制作](blog/res/blog_make_a_dashboard/16.png) 当图表全部做完之后,我们就可以进入下一步:制作dashboard。 ## 制作基于图表的Dashboard 同样在应用的右上角有一个dashboard的入口,点击右上角的新建dashboard,我们就进入了一个编辑页面。 ![制作入口](blog/res/blog_make_a_dashboard/17.png) 可以看到右上角分别有card、chart、text、icon四个窗口。分别对应:添加卡片轮廓背景、添加图片、添加文本、添加装饰图标的功能,这也是常见的Dashboard所需要的元素。 ![操作栏介绍](blog/res/blog_make_a_dashboard/18.png) ### 卡片轮廓 第一步需要用card来搭建最基本的轮廓,所有组件都可以拖动调整位置和大小,非常直观方便。 ![拖入卡片操作演示](blog/res/blog_make_a_dashboard/19.png) 另外还可以设置卡片的主题,除了最基本的扁平风格,还提供了悬浮风格、赛博朋克风格等。 ![卡片主题1](blog/res/blog_make_a_dashboard/20.png) ![卡片主题2](blog/res/blog_make_a_dashboard/21.png) 本次使用最基本的卡片完成制作。我们可以调整卡片的一些属性,比如圆角,这样一个dashboard的轮廓就做完了。 ![调整卡片](blog/res/blog_make_a_dashboard/22.png) ![轮廓搭建](blog/res/blog_make_a_dashboard/23.png) ### 添加图表 接下来需要拖入对应的图表,点击一下card来锁定card图层,这样它就无法再被选中。 ![锁定图层](blog/res/blog_make_a_dashboard/24.png) 将刚才做好的图表拖入进来,然后调整大小。其他图表也是同样方式拖入,并且可以对它们的属性进行微调。 ![图表组合操作演示1](blog/res/blog_make_a_dashboard/25.png) ![图表组合操作演示2](blog/res/blog_make_a_dashboard/26.png) ![图表组合操作演示3](blog/res/blog_make_a_dashboard/27.png) ![图表组合操作演示4](blog/res/blog_make_a_dashboard/28.png) 仍然可以进入图表制作页面,对属性进行进一步调整。调整完成后点击右上角的apply按钮就能生效。 ![图表组合](blog/res/blog_make_a_dashboard/29.png) ### 添加文本和图标 最后一步是为dashboard添加对应的文本描述、装饰图标,和前面步骤一样,把元素拖入进来,修改内容,调整位置即可。是不是非常容易学会使用! ![编辑文本](blog/res/blog_make_a_dashboard/30.png) 恭喜你,到这里你已经完成了dashboard的制作,把它保存下来以后就可以将它导出为图片。 ![报表导出](blog/res/blog_make_a_dashboard/31.png) 很高兴能向大家分享dashboard,如果你对设计dashboard没有灵感,可以多来看看本站,我会经常分享各种好看的dashboard设计。 ![报表集合](blog/res/blog2/成片-cn-封面.jpg) [立即体验](https://fastchart.cn)