柱形图双坐标如何设置
双坐标柱状折线图的使用有助于我们比较数据之前的趋势和关系，那么，怎么在Axure中用中继器制作出双坐标柱状折线图呢？这篇文章里，作者就进行了解读和分析，一起来看一下。
双坐标柱状折线图常用于同时展示两组数据的图表类型，每组数据都有自己的纵坐标轴（Y轴）。一组数据通常用柱状图表示，而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。
那今天作者就教大家，如何在Axure中用中继器制作双坐标柱状折线图的原型末班，制作完成后可以实现一下效果：
一、效果展示
1）自动生成图表效果：在中继器表格中填写维护项目数据，自动生成对应的图表。
2）标签返回数值效果：鼠标移动对应的区域，会在标签里显示该区域柱状和折线图对应的数据。
原型地址：https://14znsf.axshare.com/#g=1
二、制作教程
1. 图表外框基础元件的制作坐标轴——我们用几条水平线制作即可，最上方和最下方的用实线，最上方用虚线。
纵坐标——我们用文本标签来制作，另外需要两个文本标签，记录两个纵坐标的最大值，后续需要用来制作交互，各个纵坐标可以手动填写，也可以通过设置文本的交互，根据最大值文本标签来设置，例如，最大值是5000，那么最上方的文本标签就是5000，第二个就是5000*4/5=4000，依次类推，我们在元件载入时，用设置文本的交互，把最大值看作变色，根据变量乘比值，就可以自动设置y坐标值。
提示——我们用对应颜色的矩形制作方块，文本标签填写对应的提示文字，就是该颜色代表的项目名。
按下图所示摆放即可，具体位置可以自行调整。
2. 中继器内所需元件及表格制作图表我们用中继器来制作，中继器里面我们需要的元件包括：
- 矩形——用于制作柱状图；
- 圆点和水平线——用于制作折线图；
- 文本标签——对应的x横坐标的值；
- 背景矩形——用于鼠标移入时高亮回显，默认透明即可，选中样式为浅色填充。
将所有元件组合在一起，如下图所示摆放即可，布局选择水平。
鼠标移入组合时，用选中的交互，设置背景矩形选中为真，鼠标移出时，设置选中状态为假。这里拓展一下，如果没有其他效果，其实也可以用悬停的样式，勾选组合允许鼠标触发内容交互样式，那就不用写效果可以移入变色。不过作者考虑后期移入选中后可以在选中时写交互，所以就用选中样式来坐坐高亮效果。
中继器表格我们需要新建三列。
text列：对应x坐标显示的文本值，在中继器每项加载时，我们用设置文本的交互，就可以把该列的值设置到对应的文本标签里。
count列：对应折线图的数字（因为这个是在折线图基础上增加的柱状图，所以命名比较随意，大家也可以自行命名）。
zhuzhuangtu列：对应柱状图的数据。
3. 柱状图的制作那接下来我们写柱状图的交互，其实原理很简单，我们前面用文本记录了y坐标的最大值，然后我们用中继器表格里zhuangzhuangtu列的值除以y坐标的最大值，就可以得到一个比例，然后用这比例来乘以柱状图最高的高度，就可以求出当前柱状图的尺寸，我们在中继器每项加载时，用设置尺寸的交互，就可以将每行的柱状图设置为对应的尺寸。
4. 折线图的制作折线图开始的原理和柱状图很像，柱状图是根据表格的数据值和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值了。
5. 标签的制作主要材料包括：是矩形和文本标签。
矩形用于制作背景矩形（增加隐藏效果），以及提示标点。
文本标签用于返回项目值和具体数字。
将上方元件组合在一起，如下图所示摆放，默认隐藏。
在鼠标移入中继器内组合时，我们用显示的交互，将他显示出来，然后用设置文本的交互，将中继器表格里折线图和柱状图的值分别设置到对应的文本标签里。
鼠标移出时，我们将标签组合隐藏即可。
这样标签就可以显示和隐藏了，最后，我们还要增加一个标签跟随鼠标移动的交互，我们在鼠标移动时，用移动的交互，移动标签组合，我们可以用cursor函数获取鼠标的x值和y值，然后移动到鼠标的右下方。
这样我们就完成了中继器制作双坐标柱状折线图的原型模板，后续使用也很方便，只需要在中继器表格里维护项目、数据以及坐标轴最大值，即可自动生成对应的柱状折线图。
那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。
本文由 @AI产品人 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
","gnid":"95deb9a4c1d144b9e","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01bdd01b1e566b55dd.jpg","width":"900"},{"desc":"","height":"349","s_url":"https://p0.ssl.img.360kuai.com/t0137dc88342a442993_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0137dc88342a442993.gif","width":"633"},{"desc":"","height":"186","title":"","url":"https://p0.ssl.img.360kuai.com/t01ec6a220d1c5a21d6.jpg","width":"387"},{"desc":"","height":"192","title":"","url":"https://p0.ssl.img.360kuai.com/t01901e0269214e4e91.jpg","width":"303"},{"desc":"","height":"134","title":"","url":"https://p0.ssl.img.360kuai.com/t01eae3a12f4b259b14.jpg","width":"287"},{"desc":"","height":"192","title":"","url":"https://p0.ssl.img.360kuai.com/t015a559764a573c227.jpg","width":"595"},{"desc":"","height":"152","title":"","url":"https://p0.ssl.img.360kuai.com/t0199a5d952c9e6b5de.jpg","width":"242"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"cache","pub_time":1695368040000,"pure":"","rawurl":"http://zm.news.so.com/9d395d8da0f726eb4a1cfe3c67c47997","redirect":0,"rptid":"f81189e86cc0e515","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"Axure高保真教程：用中继器制作双坐标柱状折线图
邴莺凡4832如何在excel中设置双坐标轴 -
魏尚苑17655669448 ______ excel图表中可以通过设置次坐标轴来实现双坐标轴,以Excel2010为例,演示步骤如下:选中需要作图的两列数据,依次选择 插入 柱形图 得到销量和增长率的柱形图,由于增长率数值相比销量要小很多,所以显示在贴近横轴的位置 为了清晰显示这些数据,需要将其显示在另一个坐标轴上.将鼠标移到图形中增长率的柱状图形上,右击选择设置数据系列格式 在弹出的对话框中选择次坐标轴 然后继续选择增长率图形,右击选择更改图表类型 在弹出的对话框中选择折线图 最终效果如下
邴莺凡4832Excel 如何做双坐标轴的柱形图 -
魏尚苑17655669448 ______ http://jingyan.baidu.com/article/f3ad7d0ff2f51809c3345bbd.html
邴莺凡4832EXCEL中如何在同一个图表设置双坐标 -
魏尚苑17655669448 ______ 工作中常需要用 EXCEL 绘制各种统计分析图,可能需要将不同类型的数据在一个图表中反应出来,那么我们用 EXCEL如何去实现呢? 下面我们用一个具体的例子来演示,是如何用完成任务,做出双坐标轴图表的. 工具/原料 ...
邴莺凡4832Excel怎么设置双坐标 -
魏尚苑17655669448 ______ 在已经生成的图表区域,单击鼠标右键,“更改图表类型”,在里面选择图表组合类型,并勾选“次坐标轴”,确定,即可生成双坐标.
邴莺凡4832excel2007怎么设置图表双坐标 -
魏尚苑17655669448 ______ 先把数值和百分比都做成柱形图,然后在图上选中百分比的系列,右键选择“更改系列图表类型”,这时百分比系列由柱形图变位折线图,然后再右键点击折线,选“更改数据系列格式”,在系列选项中选“次坐标轴”,OK搞定.
邴莺凡4832如何在excel中设置双纵坐标 -
魏尚苑17655669448 ______ 方法/步骤 步骤1、在Microsoft Office Excel 2007中打开需要设置双坐标的示例XLS文件,如下图所示;步骤2、点击鼠标左键不放松选中数据区域,然后鼠标左键点击顶部菜单栏中的“插入”,继续在下方的工具栏中鼠标左键点击“柱形图”,...
邴莺凡4832excel双坐标轴怎么做 -
魏尚苑17655669448 ______ 什么时候需要用到双坐标轴呢?比如在图表中我们要表达商品每日卖出的数量和销售额随着日期的变化,基础数据如下表所示. 数据得到之后,我们先看看单坐标轴的效果,就以折线图为例,数量和销售额随日期的变化,做出的折线图如下所...
邴莺凡4832excel图表中需要做一个柱形两个折线图怎样设置坐标 -
魏尚苑17655669448 ______ 举例说明.有一张柱形图,当前为单Y轴.如图所示:点击B商品销售序列,按鼠标右键选择设置数据系列-选择次坐标轴.如图:设置后结果如图:
邴莺凡4832excel图表怎样设置坐标轴刻度和单位 -
魏尚苑17655669448 ______ 步骤/方法 如图所示,拖动鼠标选中要建立图标的数据 点击菜单栏上的:插入--柱形图,选择一种样式 在插入的图表上,先点击纵坐标轴选中它,你可以看到这个坐标轴四周出现了四个小圆,也叫做控制点 右键单击这个坐标轴,然后选择【设置坐标轴格式】 在打开的坐标轴格式对话框中,我们看到坐标轴的最大值最小值等都是自动的,我们为了自己设定,必须先选中固定的,然后设定数值,如图所示.设置好刻度以后,我们点击数字选项,然后在类别下选择【自定义】,在各式代码这一栏输入 g/毫升 ,然后点击添加按钮.这个就是给数据添加一个单位的代码.点击关闭按钮7 我们看到纵坐标轴已经添加了单位了.
邴莺凡4832Excel表图双轴坐标怎么做 -
魏尚苑17655669448 ______ 方法/步骤 如图,要表现的数据有2列,一列为数量,希望用柱形图表示,一列为比率,希望用百分比表示,这就需要两个Y轴.做这个图表的思路是:将两个数据列用同一种图表类型先做出来,然后改变其中个数据列的图表类型,并将其设置在次坐标轴上显示,具体如下:插入柱形图:系统自动生成图表,如下图 选择其中的其中的一个数据系列,并将其图表类型改为折线图:提示,系统自动生成的图表,由于数据对比太大,第二个数据系统未显示出来,但实际它是存在的,点一下第一人数据系统右边就可以看到了.在折线图上右键选择:设置数据系列格式:更改坐标轴:选择次坐标轴 做法:在拆线图表上右键选择:设置数据系统格式,并弹出的对话框中选择:次坐标即可. 进一步美化一下图表即可.