怎么把数据生成柱形图
编辑导语:一般的柱状图,只能看到某年份各月的数据,而组合柱状图或者堆叠柱状图又会显得缭乱,这时便可以用动态切换的柱状图。本文作者分享如何用中继器做一个可以动态切换的柱状图,一起来学习一下吧。
![](https://p0.ssl.img.360kuai.com/t01d49e15afa0c8ebcf.jpg)
柱状图是数据可视化常用的组件,一般的柱状图只能看到某年份各月的数据,如果用组合柱状图或者堆叠柱状图,太多分类看起来也会很缭乱,这时就可以用动态切换的柱状图。
今天作者就教大家在Axure里面如何用中继器做一个可以动态切换的柱状图。
制作完成之应具备以下交互效果:
- 在中继器表格中填写具体数据和坐标轴最大值后,自动生成对应的柱状图
- 鼠标移入对应柱状体时,显示该柱状体对应的具体数据的数值
- 可以点击切换不同标签查看对应选项的柱状图
![](https://p0.ssl.img.360kuai.com/t017e87689c52bf9af6.gif)
原型地址:https://w56jiw.axshare.com/#g=1
一、标签的制作
我们用几个矩形制作标签,表现需要设置选中样式, 案例中选中样式为填充颜色为灰色,文字颜色为白色,如下图2021年标签所示。所有标签设置为同一个单选组,第一个标签默认勾选选中。
鼠标单击标签时我们用选中的交互,设置当前元件选中为真。
二、柱状图的制作
1. 中继器表格的填写柱状图我们需要用中继器制作,中继器内部表格是存放具体数据的位置。我们需要增加一下几列数据:
- text:对应柱状图的横坐标文字
- year2017~2021:分别和上面的5个标签年份的数据对应
- fuzhu:默认为空即可,只用于后续逻辑交互
![](https://p0.ssl.img.360kuai.com/t01cca927e13ebcd235.jpg)
我们填写或者在excel复制对应数据过来即可。
2. 中继器内部元件柱状图我们用中继器来制作,中继器内部元件包括、蓝色条形(矩形)、透明背景(矩形)、横坐标文字(文本标签),如下图所示摆放:
透明背景矩形主要是用来制作高亮效果,即鼠标移入对应柱状体时,会有一个变色的提示。所以我们先设置一个选中的样式为浅蓝色,然后将柱状体和背景矩形组合,鼠标移入该组合时,设置背景矩形为选中,鼠标移出组合时,设置背景矩形为取消选中。
横坐标的文本对应的是中继器表格里text里的值,所以在中继器每项加载时,我们用设置文本的交互将text列的值设置到横坐标的数据文本里。
3. 坐标轴最大值和设置柱状的高度我们在中继器外面增加一个文本标签,在里面填写坐标轴的最大值,这里的值应该要大于或等于中继器表格里最大的数据,案例中我们填写5000。这个文本只用于计算,所以默认隐藏即可。
回到中继器每项加载时,我们根据中继器表格里的数据,用设置尺寸的交互,宽不变还是原来的宽度,高度其实就是柱状原来的高度(或者背景原来的高度)*对应的数据值在除以最大值的文本,设置尺寸的时候记的锚点设置在底部位置。
简单来书就是我当前数据值例如2500除以最大值5000,得到0.5,0.5在乘柱状图最开始的高度(这里可以看做背景矩形的高度)。
这就是设置尺寸的原理了,明白了原理之后我们还需要根据那个标签选中来确定用哪一个数据,例如2021年的标签选中我们就用year2021列的数据,如果是2020年的标签选中,我们就用year2020的数据……
![](https://p0.ssl.img.360kuai.com/t011414fcb455cb87ee.jpg)
这样柱状图就可以自动生成了,接下来我们回到中继器外面,增加边线和y坐标值,如下图所示摆放:
![](https://p0.ssl.img.360kuai.com/t0169b8de90fece8246.jpg)
y坐标值用几个文本标签制作,可以手动输入文字,也可以通过交互来自动设置,前面我们填写了最大值的文本,我们可以通过该文本自动计算,例如最下面是0,然后上面一个其实就是五分之一乘最大值5000=1000;在上面一个就是五分之二*最大值5000=2000,以此类推……
都是数学关系,具体也要看你分成几份,我们在载入时用设置文本的交互来设置即可,预览时数值就会自动变化,这里注意,如果输入的最大值不是整数,或者有可能除不尽的话,我们还要用tofixed函数将他四舍五入:
5. 显示弹窗的标签我们想做移入对应柱状体显示对应的数据的标签,所以我们用矩形制作,调整大小和样式后默认隐藏,在中继器里的柱状组合里写添加交互。
鼠标移入时,我们增加显示数据标签的交互,鼠标移出时,增加数据标签隐藏的交互,鼠标移动时,我们增加一个移动事件,我们想标签跟随鼠标移动,所以这里用到cursor的函数,可以获取鼠标的x或y值,移动时选择到达,然后获取鼠标的x值(Cursor.x)和y值(Cursor.y),我们还要加一点距离,不然就会被弹窗挡住,相当于鼠标移出了柱状组合。
![](https://p0.ssl.img.360kuai.com/t0111bb903aadd3e2b9.jpg)
最后,我们还要在鼠标移入时,用设置文本的交互将数据设置到标签上即可,这里和上面设置尺寸一样,需要分条件,就是根据选中的标签来设置具体的数据
如果2021年的标签被选中,我们就设置值中继器表格里year2021列的值;如果2020年的标签被选中,我们就设置值中继器表格里year2020列的值……
![](https://p0.ssl.img.360kuai.com/t01c054d602a87beb56.jpg)
这样我们就完成动态切换柱状图原型模板的制作了,以后使用时只需要在中继器表格里填写内容,就可自动生成能切换查看不同数据的柱状图,是不是很方便呢。
那以上就是用中继器制作树形表格原型模板的全部内容了,感谢您的阅读,我们下期见。
本文由 @Axure高保真原型 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Unsplash,基于 CC0 协议。
","force_purephv":"0","gnid":"9ecc0dba0d2d04c66","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01d49e15afa0c8ebcf.jpg","width":"900"},{"desc":"","height":"532","s_url":"https://p0.ssl.img.360kuai.com/t017e87689c52bf9af6_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t017e87689c52bf9af6.gif","width":"900"},{"desc":"","height":"175","title":"","url":"https://p0.ssl.img.360kuai.com/t01cca927e13ebcd235.jpg","width":"538"},{"desc":"","height":"526","title":"","url":"https://p0.ssl.img.360kuai.com/t011414fcb455cb87ee.jpg","width":"483"},{"desc":"","height":"297","title":"","url":"https://p0.ssl.img.360kuai.com/t0169b8de90fece8246.jpg","width":"524"},{"desc":"","height":"357","title":"","url":"https://p0.ssl.img.360kuai.com/t0111bb903aadd3e2b9.jpg","width":"478"},{"desc":"","height":"520","title":"","url":"https://p0.ssl.img.360kuai.com/t01c054d602a87beb56.jpg","width":"393"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1659407820000,"pure":"","rawurl":"http://zm.news.so.com/f4ed308f91a1045a19ad4f2a46fd5cce","redirect":0,"rptid":"9855d126fbd26d03","s":"t","src":"人人都是产品经理","tag":[],"title":"Axure教程——用中继器制作动态切换的柱状图
戎茜葛656excel三维柱形图 ,请问如何根据excel表格中的数据做成如下柱形图 -
柏肺黎19337848467 ______ 1、在表格中根据需要显示在三维柱状图的内容进行数据制作. 2、选中表格,点击工具栏中的“插入”. 3、然后找到“图表”,点击下拉框选择“三位柱形图”中的第一个样式. 4、即可插入一个匹配好数据的三维立体柱形图. 5、点击“总量”位置的柱形图,点击鼠标右键选择“添加数据标签”. 6、将两个柱形图都添加好标签后,即可如下图显示的效果,三维柱形图即可制作完毕.
戎茜葛656excel如何生成柱状图 -
柏肺黎19337848467 ______ 在菜单工具栏里,选中“插入”--“所有图表类型”--“柱状图”
戎茜葛656如何将Excel的数据制作成柱状图? -
柏肺黎19337848467 ______ 插入/图表 (可以插入很多种图形)选择“柱形图”,或者直接点击工具栏上的图表向导添加图形就可以了
戎茜葛656如何在excel做柱形图 -
柏肺黎19337848467 ______ 现在excel表格中录入每一个柱的数据 然后选择工具栏中的“插入”——“图表” 弹出“图表向导”框后,选“柱形图”——“下一步” 点数据区域游标的红白黑小按钮——跳到excel界面——用虚线框拖完之前录入的数据,敲“回车”,回到之前对话框——点“下一步” 进入第三栏,分别设逐项设置表格,可以在旁边的小预览框中看到效果,设置完了之后——可以点完成了,就能将表格直接插入excel表格中了.
戎茜葛656Excel表格数据怎么转换成多列堆积柱形图 -
柏肺黎19337848467 ______ 一、进行表格数据的变形 1、如图所示,把原始表格数据进行转换为如图的形式.数据与数据之间有间隔,和图表的柱形一样有梯度. 二、图表的制作 1、选中变形的数据区域——点击插入——推荐的图表. 2、点击所有图表——堆积柱形图. 3、数据柱子——设置数据系列格式——分类间距(调整为0). 三、图表的美化 1、添加标题和数据来源——根据表格需要,添加标题,标题尽量简洁,且能够反映表格内容,突出你想表达的观点.字体(衬线字体:线条粗细不同,适合小号字体使用,投影时清晰度不高,无衬线字体:粗细相同,更适合大号字体时使用,投影时美观) 中文字体:微软雅黑,黑体 2、添加背景设——以单色调为主.
戎茜葛656用2010版excel怎么制作柱形图 -
柏肺黎19337848467 ______ excel2010具有制作柱形图功能,具体操作如下:一、使用工具:excel2010 二、操作步骤:1、进入excel2010,选择数据区域,然后点击“插入”中的“柱形图”中的一种,如图:2、这时柱形图就自动生成了,然后右击柱形图,选择“添加数据标签”,如图:3、完整的柱形图就制作完成了,如图:
戎茜葛656EXCEL如何制作柱状图? -
柏肺黎19337848467 ______ 对需要制作柱状图的表格选定,然后在菜单中去选择插入图表,然后在类型中选择柱状图(2维还是3维的都可以),然后根据提示一步步下去就可自动生成.
戎茜葛656excel中的数据如何变成柱形图折线图啊? -
柏肺黎19337848467 ______ 首先,在数据表中输入例如: 2004 2005 2006 2007 2008 2009 人口 100 120 150 160 190 220 增长率 0% 20% 25% 7% 19% 16% 选中数据,插入柱形图 然后选择增长率的数据系列,重新设置图表类型为折线图,添加次要坐标轴,完成,如图:
戎茜葛656excel怎么做柱形图 -
柏肺黎19337848467 ______ 点击'插入',选择'图表'.选择图表类型的直形图点击'下一步',在数据范围内选中所要以柱形图表示的数据,再点击'下一步',输入和选择相关信息后,再点击'下一步',再点'击完'成即可.如果对所产生的图不满意,则可选择图点鼠标右键,更改格式、类型、数据、选项及位置.还可以格式里设置图表的效果.
戎茜葛656请写出Excel制作柱形图表的步骤? -
柏肺黎19337848467 ______ 1.首选把你想制作图形的数据区域选择好2.然后点击图表向导 也可以点击 --插入-- 图表 也会出来选项 3.你会看到柱形图 和向导提示 下一步 下一步 就可以 了 里面有选项 可以自己进行...