一步一步制作柱状图
编辑导语：一般的柱状图，只能看到某年份各月的数据，而组合柱状图或者堆叠柱状图又会显得缭乱，这时便可以用动态切换的柱状图。本文作者分享如何用中继器做一个可以动态切换的柱状图，一起来学习一下吧。
柱状图是数据可视化常用的组件，一般的柱状图只能看到某年份各月的数据，如果用组合柱状图或者堆叠柱状图，太多分类看起来也会很缭乱，这时就可以用动态切换的柱状图。
今天作者就教大家在Axure里面如何用中继器做一个可以动态切换的柱状图。
制作完成之应具备以下交互效果：
- 在中继器表格中填写具体数据和坐标轴最大值后，自动生成对应的柱状图
- 鼠标移入对应柱状体时，显示该柱状体对应的具体数据的数值
- 可以点击切换不同标签查看对应选项的柱状图
原型地址：https://w56jiw.axshare.com/#g=1
一、标签的制作
我们用几个矩形制作标签，表现需要设置选中样式， 案例中选中样式为填充颜色为灰色，文字颜色为白色，如下图2021年标签所示。所有标签设置为同一个单选组，第一个标签默认勾选选中。
鼠标单击标签时我们用选中的交互，设置当前元件选中为真。
二、柱状图的制作
1. 中继器表格的填写柱状图我们需要用中继器制作，中继器内部表格是存放具体数据的位置。我们需要增加一下几列数据：
- text：对应柱状图的横坐标文字
- year2017~2021：分别和上面的5个标签年份的数据对应
- fuzhu：默认为空即可，只用于后续逻辑交互
我们填写或者在excel复制对应数据过来即可。
2. 中继器内部元件柱状图我们用中继器来制作，中继器内部元件包括、蓝色条形（矩形）、透明背景(矩形)、横坐标文字（文本标签），如下图所示摆放：
透明背景矩形主要是用来制作高亮效果，即鼠标移入对应柱状体时，会有一个变色的提示。所以我们先设置一个选中的样式为浅蓝色，然后将柱状体和背景矩形组合，鼠标移入该组合时，设置背景矩形为选中，鼠标移出组合时，设置背景矩形为取消选中。
横坐标的文本对应的是中继器表格里text里的值，所以在中继器每项加载时，我们用设置文本的交互将text列的值设置到横坐标的数据文本里。
3. 坐标轴最大值和设置柱状的高度我们在中继器外面增加一个文本标签，在里面填写坐标轴的最大值，这里的值应该要大于或等于中继器表格里最大的数据，案例中我们填写5000。这个文本只用于计算，所以默认隐藏即可。
回到中继器每项加载时，我们根据中继器表格里的数据，用设置尺寸的交互，宽不变还是原来的宽度，高度其实就是柱状原来的高度（或者背景原来的高度）*对应的数据值在除以最大值的文本，设置尺寸的时候记的锚点设置在底部位置。
简单来书就是我当前数据值例如2500除以最大值5000，得到0.5，0.5在乘柱状图最开始的高度（这里可以看做背景矩形的高度）。
这就是设置尺寸的原理了，明白了原理之后我们还需要根据那个标签选中来确定用哪一个数据，例如2021年的标签选中我们就用year2021列的数据，如果是2020年的标签选中，我们就用year2020的数据……
4. 坐标和边线这样柱状图就可以自动生成了，接下来我们回到中继器外面，增加边线和y坐标值，如下图所示摆放：
y坐标值用几个文本标签制作，可以手动输入文字，也可以通过交互来自动设置，前面我们填写了最大值的文本，我们可以通过该文本自动计算，例如最下面是0，然后上面一个其实就是五分之一乘最大值5000=1000；在上面一个就是五分之二*最大值5000=2000，以此类推……
都是数学关系，具体也要看你分成几份，我们在载入时用设置文本的交互来设置即可，预览时数值就会自动变化，这里注意，如果输入的最大值不是整数，或者有可能除不尽的话，我们还要用tofixed函数将他四舍五入：
5. 显示弹窗的标签我们想做移入对应柱状体显示对应的数据的标签，所以我们用矩形制作，调整大小和样式后默认隐藏，在中继器里的柱状组合里写添加交互。
鼠标移入时，我们增加显示数据标签的交互，鼠标移出时，增加数据标签隐藏的交互，鼠标移动时，我们增加一个移动事件，我们想标签跟随鼠标移动，所以这里用到cursor的函数，可以获取鼠标的x或y值，移动时选择到达，然后获取鼠标的x值（Cursor.x）和y值（Cursor.y），我们还要加一点距离，不然就会被弹窗挡住，相当于鼠标移出了柱状组合。
最后，我们还要在鼠标移入时，用设置文本的交互将数据设置到标签上即可，这里和上面设置尺寸一样，需要分条件，就是根据选中的标签来设置具体的数据
如果2021年的标签被选中，我们就设置值中继器表格里year2021列的值；如果2020年的标签被选中，我们就设置值中继器表格里year2020列的值……
这样我们就完成动态切换柱状图原型模板的制作了，以后使用时只需要在中继器表格里填写内容，就可自动生成能切换查看不同数据的柱状图，是不是很方便呢。
那以上就是用中继器制作树形表格原型模板的全部内容了，感谢您的阅读，我们下期见。
本文由 @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教程——用中继器制作动态切换的柱状图
常食红1394怎么用WORD做柱状图 -
欧牲伏17124084902 ______ 材料/工具:word20101、打开Word,建立空白文档.2、点击【插入】—【图表】—【柱形图】—【簇状柱形图】.3、点击【确定】,得到默认样式的簇状柱形图.4、可以看到,默认的簇状柱形图包含了标题、图例、主要横网格线、纵坐标轴、横坐标轴等元素.5、选中图表,点击【添加图表元素】—【数据标签】—【其他数据标签选项】.6、在右侧打开的窗口中,勾选【值】和【类别名称】,则柱形中就添加了数值和类别.7、网格线可以直接删除.8、然后把图例放置到标题旁边,并填充颜色,标题予以放大.9、再把各个柱形的颜色设置为不同浓度的同一颜色,使整体上显得更加协调.这样,就得到了最终的效果图.
常食红1394如何做柱形图 excel2013 -
欧牲伏17124084902 ______ 方法/步骤 如图中所示,要将图中的数据用柱形图表示出来.具体操作步骤向下看.首先选中要制作柱形图的数据,如图所示选中后的状态.选中要编辑的数据后,在工具栏中找到插入选项,并点击选择,如图效果.在插入的选项卡下,找到插入柱形图并点击选择自己喜欢的图形.生成好的柱形图如图所示,大家有没有发现问题,2014年的数值没有显示出来,那么问题出在哪里呢?对,是单位除了问题,excel柱形图数据是不能加单位的,原因自己百度一下.将单位去掉后在次重新生成柱形图的效果如图所示,根据自己的需要在更改一下即可.
常食红1394Excel怎么制作漂亮的柱状图 -
欧牲伏17124084902 ______ 方法/步骤 1 录入数据. 选择数据,插入柱状图,得到软件默认的柱状图. 设计标题.在图表工具中选择图表标题→图表上方,然后输入需要的标题文字.设置标题字体和字号.选用笔划较粗的字体,使用大字号. 设计图例.选择在顶部显示...
常食红1394如何使用wps表格做柱状图 -
欧牲伏17124084902 ______ 打开WPS软件,输入数据,制作数据表,如图.选择A3:D7单元格区域,切换到“插入”选项卡,点击“插入”,在弹出的“图表类型”中选择二维柱形图.点击“下一步”,数据区域中选择系列产生在“列”,再点击“系列”选项,将系列1 命名为“10月份销售额”,系列2命名为“11月份销售额”,系列3命名为“12月份销售额”.改完之后,点击“下一步”,进入图表选项,在标题中,将图表标题改为“员工月度业绩表”,分类(X)轴改为“员工姓名”,数值(Y)轴改为“销售额”.再点击“网格线”选项,取消主要网格线前面的打勾.再点击“数据表”选项,在“显示数据表”和“显示图例项标示”选项面前打上勾.6 接下来,点击完成,这样一个柱形图就创建好了
常食红1394excel2010中柱形图怎么嵌入表格中 -
欧牲伏17124084902 ______ 材料/工具:Excel2010 1、以下图数据为例要求以A1:C6单元格区域为数据源插入柱形图表. 2、点击表格中的任意单元格,点击【插入】选项卡,在弹出的选项中选择点击【柱形图】选项,然后在菜单中选择柱形图的样式. 3、通过上一步骤的操作,工作表中插入了一个未经编辑的柱形图表. 4、选中图表然后在【数据】功能选项中点击【选择数据】选项. 5、弹出【选择数据源】对话框,将光标移动到【图表数据区域】后面的空白对话框中,在工作表中直接选择A1:C6单元格区域,然后点击【确定】按钮. 6、返回到工作表中,根据指定的单元格区域插入的柱形图就完成了.
常食红1394如何做柱状图 -
欧牲伏17124084902 ______ 先制作一个数据透视表,然后制作此图表. 假如A列为姓名,B列为年龄.共100行. 1、选择A1:B100单元格,执行“数据”-“数据透视表和数据透视图”,在所需创建的报表类型选“数据透视表”,点下一步,选定区域为:“Sheet1!$A$1:$...
常食红1394请写出Excel制作柱形图表的步骤? -
欧牲伏17124084902 ______ 1.首选把你想制作图形的数据区域选择好2.然后点击图表向导 也可以点击 --插入-- 图表 也会出来选项 3.你会看到柱形图 和向导提示 下一步 下一步 就可以 了 里面有选项 可以自己进行...
常食红1394如何用 Excel 2007 工作表制作柱形图 -
欧牲伏17124084902 ______ 制作步骤如下: 1,新建工作表,建立自己的工作表格, 2,在菜单栏选择插入柱形图, 3,点击图上的空白区域右键单击—选择数据, 4,点击图片右边的红色箭头, 5,将鼠标选中你已经制作好的表格, 6,继续点击红色箭头点击确定, 7,如果在制作表格的时候忘记写数字,可以补全,我的年龄一栏刚才没写,这次可以协商,柱形图自动效果出来了.
常食红1394wps怎么做柱状图 -
欧牲伏17124084902 ______ 1.首先选取所要制作柱状图的数据信息. 2.点击插入,进入图表类型对话框. 3.点击图表开始选取柱状图样板.图表里面还有其他种类的图表样式,比如条形图、折线图等,视情况选择所需图表样式. 4.点击下一步开始对柱状图中的各项信息进行修改. 5.点击系列,对图表信息进行修改. 6.点击下一步,对纵横轴和图表名称进行修改.还有其他可以选择修改的选项. 7.点击完成,柱状图就做好了.
常食红1394怎么在EXCEL中加柱状图~
欧牲伏17124084902 ______ 插入--图表--标准类型下选择柱形图