龙岩公司做网站,淘宝网站模板是什么做的,校园品牌推广方案,成都seo排名双坐标柱状折线图常用于同时展示两组数据的图表类型#xff0c;每组数据都有自己的纵坐标轴#xff08;Y轴#xff09;。一组数据通常用柱状图表示#xff0c;而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。
那今天作者就教大家#xff…双坐标柱状折线图常用于同时展示两组数据的图表类型每组数据都有自己的纵坐标轴Y轴。一组数据通常用柱状图表示而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。
那今天作者就教大家如何在Axure中用中继器制作双坐标柱状折线图的原型模板制作完成后可以实现一下效果
一、效果展示
1、自动生成图表效果在中继器表格中填写维护项目数据自动生成对应的图表
2、标签返回数值效果鼠标移动对应的区域会在标签里显示该区域柱状和折线图对应的数据 【原型预览含下载地址】
https://axhub.im/ax9/9a27399d9b2d17a5/#g1p柱状折线图双坐标
二、制作教程
1、图表外框基础元件的制作
坐标轴——我们用几条水平线制作即可最上方和最下方的用实线最上方用虚线
纵坐标——我们用文本标签来制作另外需要两个文本标签记录两个纵坐标的最大值后续需要用来制作交互各个纵坐标可以手动填写也可以通过设置文本的交互根据最大值文本标签来设置例如最大值是5000那么最上方的文本标签就是5000第二个就是5000*4/54000依次类推我们在元件载入时用设置文本的交互把最大值看作变色根据变量乘比值就可以自动设置y坐标值
提示——我们用对应颜色的矩形制作方块文本标签填写对应的提示文字就是该颜色代表的项目名。
按下图所示摆放即可具体位置可以自行调整 2、中继器内所需元件及表格制作
图表我们用中继器来制作中继器里面我们需要的元件包括
矩形——用于制作柱状图
圆点和水平线——用于制作折线图
文本标签——对应的x横坐标的值
背景矩形——用于鼠标移入时高亮回显默认透明即可选中样式为浅色填充
将所有元件组合在一起如下图所示摆放即可布局选择水平 鼠标移入组合时用选中的交互设置背景矩形选中为真鼠标移出时设置选中状态为假。这里拓展一下如果没有其他效果其实也可以用悬停的样式勾选组合允许鼠标触发内容交互样式那就不用写效果可以移入变色。不过作者考虑后期移入选中后可以在选中时写交互所以就用选中样式来坐坐高亮效果 中继器表格我们需要新建三列
text列对应x坐标显示的文本值在中继器每项加载时我们用设置文本的交互就可以把该列的值设置到对应的文本标签里 count列对应折线图的数字因为这个是在折线图基础上增加的柱状图所以命名比较随意大家也可以自行命名
zhuzhuangtu列对应柱状图的数据 3、柱状图的制作
那接下来我们写柱状图的交互其实原理很简单我们前面用文本记录了y坐标的最大值然后我们用中继器表格里zhuangzhuangtu列的值除以y坐标的最大值就可以得到一个比例然后用这比例来乘以柱状图最高的高度就可以求出当前柱状图的尺寸我们在中继器每项加载时用设置尺寸的交互就可以将每行的柱状图设置为对应的尺寸 4、折线图的制作
折线图开始的原理和柱状图很像柱状图是根据表格的数据值和y坐标最大值比例设置元件的高度那折线图就是根据表格的数据值和y坐标最大值比例将元件和折线移动到对应的位置。 然后我们知道两点确认一条直线所以如果是第一个点是不需要有直线的因为第一个第二个点结合才会出现直线。所以在第一行加载时我们用隐藏的交互将第一根折线隐藏起来。我们还要将第一个元件的y坐标值记录下来我们要在中继器外面增加一个文本标签默认隐藏只用于记录前面一行圆点y的坐标值我们成为y1 然后我们在加载第二行数据是我们也是在中继器外面增加一个文本标签用于记录当前行圆点y的坐标值。
然后我们根据两点间坐标公式d√[(x1-x2)²(y1-y2)²],这样就可以求出直线的距离y1y2我们都知道了。x1-x2其实就是每个图形之间的宽度我们可以看作背景矩形的宽度这样我们用设置尺寸就交互就可以设置出对应长度的线段。
求完长度我们还要求角度可以用Math.atan2(y2-y1,x2-x1)*180/π来计算出两个点之间的交互然后用旋转的交互将线段设置到对应的角度这两两点就连城线了
最后我们用设置文本的交互将当前行圆点的y坐标值设置到记录y1的文本标签里那加载下一行的时候就也能知道上一行的y1值了 5、标签的制作
主要材料包括是矩形和文本标签
矩形用于制作背景矩形增加隐藏效果以及提示标点
文本标签用于返回项目值和具体数字
将上方元件组合在一起如下图所示摆放默认隐藏 在鼠标移入中继器内组合时我们用显示的交互将他显示出来然后用设置文本的交互将中继器表格里折线图和柱状图的值分别设置到对应的文本标签里 鼠标移出时我们将标签组合隐藏即可。 这样标签就可以显示和隐藏了最后我们还要增加一个标签跟随鼠标移动的交互我们在鼠标移动时用移动的交互移动标签组合我们可以用cursor函数获取鼠标的x值和y值然后移动到鼠标的右下方 这样我们就完成了中继器制作双坐标柱状折线图的原型模板后续使用也很方便只需要在中继器表格里维护项目、数据以及坐标轴最大值即可自动生成对应的柱状折线图。
那以上就是本期教程的全部内容感兴趣的同学们可以动手试试哦感谢您的阅读我们下期见。
