柱状图2个纵坐标轴

双坐标柱状折线图常用于同时展示两组数据的图表类型，每组数据都有自己的纵坐标轴（Y轴）。一组数据通常用柱状图表示，而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。

那今天作者就教大家，如何在Axure中用中继器制作双坐标柱状折线图的原型末班，制作完成后可以实现一下效果：

一、效果展示

1）自动生成图表效果：在中继器表格中填写维护项目数据，自动生成对应的图表。

2）标签返回数值效果：鼠标移动对应的区域，会在标签里显示该区域柱状和折线图对应的数据。

原型地址：https://14znsf.axshare.com/#g=1

二、制作教程

坐标轴——我们用几条水平线制作即可，最上方和最下方的用实线，最上方用虚线。

纵坐标——我们用文本标签来制作，另外需要两个文本标签，记录两个纵坐标的最大值，后续需要用来制作交互，各个纵坐标可以手动填写，也可以通过设置文本的交互，根据最大值文本标签来设置，例如，最大值是5000，那么最上方的文本标签就是5000，第二个就是5000*4/5=4000，依次类推，我们在元件载入时，用设置文本的交互，把最大值看作变色，根据变量乘比值，就可以自动设置y坐标值。

提示——我们用对应颜色的矩形制作方块，文本标签填写对应的提示文字，就是该颜色代表的项目名。

按下图所示摆放即可，具体位置可以自行调整。

图表我们用中继器来制作，中继器里面我们需要的元件包括：

• 矩形——用于制作柱状图；
• 圆点和水平线——用于制作折线图；
• 文本标签——对应的x横坐标的值；
• 背景矩形——用于鼠标移入时高亮回显，默认透明即可，选中样式为浅色填充。

将所有元件组合在一起，如下图所示摆放即可，布局选择水平。

鼠标移入组合时，用选中的交互，设置背景矩形选中为真，鼠标移出时，设置选中状态为假。这里拓展一下，如果没有其他效果，其实也可以用悬停的样式，勾选组合允许鼠标触发内容交互样式，那就不用写效果可以移入变色。不过作者考虑后期移入选中后可以在选中时写交互，所以就用选中样式来坐坐高亮效果。

中继器表格我们需要新建三列。

text列：对应x坐标显示的文本值，在中继器每项加载时，我们用设置文本的交互，就可以把该列的值设置到对应的文本标签里。

count列：对应折线图的数字（因为这个是在折线图基础上增加的柱状图，所以命名比较随意，大家也可以自行命名）。

zhuzhuangtu列：对应柱状图的数据。

那接下来我们写柱状图的交互，其实原理很简单，我们前面用文本记录了y坐标的最大值，然后我们用中继器表格里zhuangzhuangtu列的值除以y坐标的最大值，就可以得到一个比例，然后用这比例来乘以柱状图最高的高度，就可以求出当前柱状图的尺寸，我们在中继器每项加载时，用设置尺寸的交互，就可以将每行的柱状图设置为对应的尺寸。

折线图开始的原理和柱状图很像，柱状图是根据表格的数据值和y坐标最大值比例设置元件的高度，那折线图就是根据表格的数据值和y坐标最大值比例将元件和折线移动到对应的位置。

然后我们知道两点确认一条直线，所以如果是第一个点，是不需要有直线的，因为第一个第二个点结合才会出现直线。所以在第一行加载时，我们用隐藏的交互，将第一根折线隐藏起来。我们还要将第一个元件的y坐标值记录下来，我们要在中继器外面增加一个文本标签，默认隐藏，只用于记录前面一行圆点y的坐标值，我们成为y1。

然后我们在加载第二行数据是，我们也是在中继器外面增加一个文本标签，用于记录当前行圆点y的坐标值。

然后我们根据两点间坐标公式d=√[(x1-x2)²+(y1-y2)²]，这样就可以求出直线的距离，y1，y2我们都知道了。x1-x2，其实就是每个图形之间的宽度，我们可以看作背景矩形的宽度，这样我们用设置尺寸就交互，就可以设置出对应长度的线段。

求完长度，我们还要求角度，可以用Math.atan2(y2-y1,x2-x1)*180/π来计算出两个点之间的交互，然后用旋转的交互，将线段设置到对应的角度，这两两点就连城线了。

最后，我们用设置文本的交互，将当前行圆点的y坐标值设置到记录y1的文本标签里，那加载下一行的时候，就也能知道上一行的y1值了。

主要材料包括：是矩形和文本标签。

矩形用于制作背景矩形（增加隐藏效果），以及提示标点。

文本标签用于返回项目值和具体数字。

将上方元件组合在一起，如下图所示摆放，默认隐藏。

在鼠标移入中继器内组合时，我们用显示的交互，将他显示出来，然后用设置文本的交互，将中继器表格里折线图和柱状图的值分别设置到对应的文本标签里。

鼠标移出时，我们将标签组合隐藏即可。

这样标签就可以显示和隐藏了，最后，我们还要增加一个标签跟随鼠标移动的交互，我们在鼠标移动时，用移动的交互，移动标签组合，我们可以用cursor函数获取鼠标的x值和y值，然后移动到鼠标的右下方。

这样我们就完成了中继器制作双坐标柱状折线图的原型模板，后续使用也很方便，只需要在中继器表格里维护项目、数据以及坐标轴最大值，即可自动生成对应的柱状折线图。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

禹饶宜2173如何在excel2003图表中增加第二个纵坐标轴 -
元管钟19537863535 ______ 先把数值和百分比都做成柱形图,然后在图上选中百分比的系列,右键选择“更改系列图表类型”,这时百分比系列由柱形图变位折线图,然后再右键点击折线,选“更改数据系列格式”,在系列选项中选“次坐标轴”,OK搞定.

禹饶宜2173如何在excel同一个图表中设置两个不同的纵坐标?同一个横坐标,有两个纵坐标,范围大小不同
元管钟19537863535 ______ 对同一个数据系列,EXCEL只支持一个横轴,一个纵轴.如果有两个或两个以上的数据系列,可以选择将它们放在不同的坐标轴上,在图上选择该数据系列——右击鼠标——选放到次坐标轴.EXCEL的坐标轴是成对出现的,如果要有两个纵坐标轴,EXCEL默认两个横坐标轴与之相对应.坐标轴可以隐藏不显示.

禹饶宜217303版,excel表格中,做柱状图,可不可以在图的两侧都显示纵坐标?怎么操作? -
元管钟19537863535 ______ 可以增加一个辅助系列,然后将辅助系列放到第二个坐标轴上(在图上单击辅助系列,然后单击右键,选择格式数据系列,再来选择放到第二个坐标轴),然后将两个坐标轴的最大值、最小值与该度设为一致,再来将辅助系列隐藏(设为没有填充、没有边线就可以隐藏了).

禹饶宜2173如何在Excel中做出两个坐标轴的图表 -
元管钟19537863535 ______ 我们先创建一个单纵坐标的表.02 我们点击需要显示的操作的数据,然后在这个选范例里面,我们如下图所示点击 显示平均温度的蓝色条形图 .然后我们再在格式中点击设置所选内容格式.03 然后会弹出,如下对话框,接着我们在打开窗口的左边点击系列选项下面找到系列绘制在然后我们再找到里边的次坐标轴之后我们点击关闭.04 但有个问题是我们发现两个纵坐标轴是在一起了.05 先确定平均温度的柱状图已被选取.单击设计选项卡中的更改图表类型 .06 然后我们在这里找到“折线图”中的一个例子之后再点击确定.07 大功告成!

禹饶宜2173excel双坐标轴怎么做 -
元管钟19537863535 ______ 什么时候需要用到双坐标轴呢?比如在图表中我们要表达商品每日卖出的数量和销售额随着日期的变化,基础数据如下表所示. 数据得到之后,我们先看看单坐标轴的效果,就以折线图为例,数量和销售额随日期的变化,做出的折线图如下所...

禹饶宜2173在excel中如何建立双坐标轴 -
元管钟19537863535 ______ 在EXCEL中绘制双坐标轴图表的方法: 不同版本的Excel操作方式略有不同,但大同小异,下面以Excel2010为例. 1.打开excel数据表,如图所示,该表中销售额与毛利率要同时显示到一张图表上. 2.选取数据表,菜单栏“插入”——柱状图.这时得到一个柱状图表,销售额与毛利率都是柱状的.下面对毛利率调整. 3.选择“毛利率”的柱状图,鼠标右键选择“设置数据系列格式”.将数据设置为“次坐标轴”(默认的是主坐标轴). 4.再点击毛利率柱状图,鼠标右键“更改系列图表类型”——将其更改为折线图就可以了.

禹饶宜2173Office 2010 Excel中如何用双X轴或双Y轴坐标作图? -
元管钟19537863535 ______ 做图之前,一些规定我们必须知道,先做如下解释: 所谓双X轴坐标,即有2个X轴,主X轴和次X轴,Excel中规定图表下方刻度为主X轴,上方刻度为次X轴; 所谓双Y轴坐标,即有2个Y轴,主Y轴和次Y轴,Excel中规定图表左方刻度为主Y轴,...

禹饶宜2173excel中如何改变X轴的数值 -
元管钟19537863535 ______ 1.画出有两个纵坐标轴,Y 轴主坐标有一个柱状图对应,Y 轴次坐标有两个折线对应的图. 2.在插入图表里面的自定义中选择选择“两轴线-柱图” 可以画出来一个有两个柱,一个折线的图 . 3.选择想画成折线却是柱图的系列,右键在“图表类型”中改成“柱形图.选择想改为 Y 轴次坐标的系列,右键在“数据系列格式”-“坐标轴”中改为“次坐标轴” 二、将X 轴默认的123……改为年份或其他数据. 4.右键——源数据——系列——分类X 轴标志:选择需要的数据即可 .

禹饶宜2173如何在 Excel 2007 中给图表增加第二个纵坐标轴 详细??
元管钟19537863535 ______ 单击你想要显示纵坐标轴的数据系列.在此范例中,单击显示 平均温度的蓝色条形图 .找到 格式 选项卡,单击 设置所选内容格式. 这时 设置数据系列格式 对话框就会弹出. 在 系列选项 中, 找到 系列绘制在 选项, 选取 次坐标轴 选项,再单击 关闭. 这样我们的以平均温度为坐标的纵坐标 轴就绘制成功了. 现在虽然有了两个纵坐标轴,但是现在柱状图都叠在一起,无 当然可以. 先确定平均温度的柱状图已被选取. 单击 设计 选项卡中的 更改图表类型 . 更改图表类型 对话框弹出了. 选择你想要的 折线图 中其中一个范例,然后单击 确定.

禹饶宜2173excel表格中柱状图的x坐标轴标注该怎么做 -
元管钟19537863535 ______ 1.如图所示,拖动鼠标选中要建立图标的数据. 2.点击菜单栏上的:插入--柱形图,选择一种样式. 3.在插入的图表上,先点击纵坐标轴选中它,可以看到这个坐标轴四周出现了四个小圆,也叫做控制点. 4.右键单击这个坐标轴,然后选择【设置坐标轴格式】. 5.在打开的坐标轴格式对话框中,看到坐标轴的最大值最小值等都是自动的,为了自己设定,必须先选中固定的,然后设定数值,如图所示. 6.设置好刻度以后,点击数字选项,然后在类别下选择【自定义】,在各式代码这一栏输入 g/毫升 ,然后点击添加按钮.这个就是给数据添加一个单位的代码.点击关闭按钮. 7.看到纵坐标轴已经添加了单位了.