直线上两点间距离公式

双坐标柱状折线图常用于同时展示两组数据的图表类型，每组数据都有自己的纵坐标轴（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 协议

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

池依郭2344两点之间的距离公式 -
广孔耍18990618193 ______ 距离的平方=(第一点的横坐标-第二点的横坐标)的平方+(第一点的纵坐标-第二点的纵坐标)的平方

池依郭2344点到直线的距离公式是?两点间的距离公式是? -
广孔耍18990618193 ______ 设直线为ax+by+c=0,点A坐标(x1,y1)点B坐标(x2,y2)则点到直线距离d= Ⅰ ax1+bx2+cⅠ/√(a²+b²),Xab=√(x1-x2)²+(y1-y2)²

池依郭2344两点间距离公式 -
广孔耍18990618193 ______ 1.平面内 设A(X1,Y1)、B(X2,Y2), 则∣AB∣=√[(X1-X2)^2+(Y1-Y2)^2]=√(1+k^2) (∣X1-X2∣)^2, 或者∣AB∣=∣X1-X2∣secα=∣Y1-Y2∣/sinα, 其中α为直线AB的倾斜角,k为直线AB的斜率. 2.空间中 设A(x1,y1,z1),B(x2,y2,z2) |AB|=√[(x2-x1)^2; + (y2-y1)^2; + (z2-z1)^2]

池依郭2344求高中平面几何公式,像点到直线距离,两点之间的距离公式,圆的公式等. -
广孔耍18990618193 ______[答案] 点(x0,y0)到直线Ax+By+C=0的距离d=|Ax0+By0+C|/√(A²+B²) 两点P1(x1,y1)与P2(x2,y2)之间的距离d=√[(x1-x2)²+(y1-y2)²] 圆的标准方程:(x-a)²+(y-b)²=r² 圆的一般方程:x²+y²+Dx+Ey+F=0

池依郭2344点直线间距离公式带k
广孔耍18990618193 ______ 点直线间距离公式带k:点P(X0,Y0),到直线y=kx+b的距离公式是d=|kx0-y0+b|/根号(k²+1).点到直线的距离,即过这一点做目标直线的垂线,由这一点至垂足的距离.直线由无数个点构成.直线是面的组成成分,并继而组成体.没有端点,向两端无限延长,长度无法度量.直线是轴对称图形.有无数条对称轴,其中一条是它本身,还有所有与其垂直的直线(有无数条)对称轴.在平面上过不重合的两点有且只有一条直线,即不重合两点确定一条直线.在球面上,过两点可以做无数条类似直线.

池依郭2344谁能告诉我两点间距离公式是什么==?谁能告诉我两点间距离公式是什
广孔耍18990618193 ______ 用直角三角形已知两直角边求斜边计算.(x1-x2)^2+(y1-y2)^2=距离的平方

池依郭2344两点间的距离公式斜率
广孔耍18990618193 ______ 两点间的距离公式斜率为k=(y2-y1)/(x2-x1),两点之间的距离AB=√(x2-x1)²+(y2-y1)²,斜率又称“角系数”,是一条直线对于横坐标轴正向夹角的正切,反映直线对水平面的倾斜度.一条直线与某平面直角坐标系横坐标轴正半轴方向所成的角的正切值即该直线相对于该坐标系的斜率.如果直线与x轴互相垂直,直角的正切值为tan90°,故此直线不存在斜率也可以说直线的斜率为无穷大.当直线L的斜率存在时,对于一次函数y=kx+b(斜截式),k即该函数图像的斜率.

池依郭2344两点间距离怎么算?
广孔耍18990618193 ______ 两点间距离公式A(a,b)B(x,y) d的平方=(a-x)的平方+(b-y)的平方 d为A,B两点间的距离

池依郭2344两点间距离公式!! -
广孔耍18990618193 ______ 假设A(X1,Y1),B(X2,Y2)那么AB距离D=根号[(X1-X2)^2+(Y1-Y2)^2]

池依郭2344两点间距离公式斜率带k
广孔耍18990618193 ______ 证明:斜率为k的直线上两点p1(x1,y1),p2(x2,y2);K= (y2-y1)/(x2-x1),|p1p2|=√(x2-x1)*(x2-x1) + (y2-y1)* (y2-y1).在根号提取(x2-x1)*(x2-x1)得到,|p1p2|=|x2-x1|*√1+(y2-y1)*(y2-y1)/(x2-x1),/(x2-x1)=|x2-x1|*√1+k²;在根号内提取(y2-y1)* (y2-y1) 得到,|p1p2|=|y2-y1|*√1+(x2-x1)*(x2-x1) /(y2-y1)* (y2-y1)=|=|y2-y1|*√1+1/k².