Flex 图表实现滚动条和多个Y轴

最新推荐文章于 2024-04-18 14:30:56 发布
最新推荐文章于 2024-04-18 14:30:56 发布
阅读量222 收藏
点赞数
分类专栏： Flex 文章标签： Flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbeiyan/article/details/83635015
版权

    最近几天，都在研究Flex 图表方面的东西,在网上都查阅一些资料，都没有这些方面资料，于是感觉很无奈...不过看到有些收费图表做得很漂亮,也能满足我的需求,可是要钱...不知道大家有没这方面经验...请指点一二!
     就拿LineChart来说吧!现在我需求是这样的... 
     1.想做一个LineChart滚动条拉动,类似DIV那种,前提当需要拉动滚动条时候,要保持X和Y轴不变，只需要拉动图表里面的一些线条... 
     2.实现多个动态Y轴，可以自定义....等等... 
      我现在直接上图吧...现在我只实现２个Y轴,这个滚动条在外面，只要一拉动整个图表都会动...


      

    

 

yangbeiyan
关注
专栏目录
flex chart双Y轴
tiannnyu的专栏
08-26 1484
<br /><?xml version="1.0" encoding="utf-8"?><br /><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" <br />      xmlns:s="library://ns.adobe.com/flex/spark" <br />      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"><br /> <s
web前端入门到实战：CSS 滚动捕捉技术（Scroll Snapping）
前端工程师年薪30万，就靠这套教程！持续更新最新知识
05-05 689
CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置。非常适合用来建立下面这样的应用： 基本使用 实现滚动捕捉主要依靠两个属性：容器元素的 scroll-snap-type 属性，以及子元素的 scroll-snap-align 属性。最基本的使用方式如下： 专门建立的学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基...
Flex双Y轴的实现
complex
10-04 213
最近由于项目的需要,用flex实现了一个双Y轴的Chart,现在将代码拿出来晒晒! [code="xml"] ...
Flex 滚动条样式
恶人
07-14 722
<br />VScrollBar {<br />/*<br /><br />下面箭头的样式<br />*/<br />downArrowUpSkin:<br />Embed(source="icons/hsthumb.gif");<br />downArrowOverSkin:<br />Embed(source="icons/hsthumb.gif");<br />downArrowDownSkin:<br />Embed(source="icons/hsthumb.gif");<br /><br />/
flex布局，超出部分出现滚动条
weixin_44110923的博客
03-25 9573
效果图如下: html代码： <div class="chart"> <div class="monitoring-main"> <div class="monitoring-list"> <div class="item">
flex布局下X轴超出横向滚动显示
总结前端开发中遇到的问题，分享前端知识
12-21 2847
<div class="hotPort" ref="hotPort"> <p class="colorf">热门港口</p> <ul> <li v-for="data in hotPort" :key="data.id" @click="handleChange(data)"> <span> {{ data.portName }} .
Flex画 坐标轴曲线 项目用过的 flex4 开发
07-31
这种类型的图表由X轴（水平轴）和Y轴（垂直轴）组成，它们定义了数据点在二维空间的位置。在Flex4中，我们可以利用Spark图表组件来实现这样的功能。 1. **Spark图表组件**：Flex4引入了Spark图表组件，相比先前的MX...
flex折线图
08-14
与折线图类似，我们需要设置数据源、x轴和y轴的字段，以及每个柱子的样式。此外，还可以添加堆叠柱状图，显示各组的总和，或者百分比柱状图，显示每个柱子相对于总和的比例。 4. **Java方向的案例** 虽然Flex主要...
【Echarts数据可视化】一个项目带你学会酷炫的数据可视化
最新发布
m0_61549953的博客
04-18 455
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’],data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’],data: [‘上海’, ‘广州’, ‘北京’, ‘深圳’, ‘合肥’, ‘’, ‘…’, ‘’, ‘杭州’, ‘厦门’, ‘济南’, ‘成都’, ‘重庆’]
如何使用CSS和JavaScript构建简单的甘特图
Web design 教程小屋
07-09 908
到目前为止，在我们CSS图表系列教程中，我们已经学习了如何创建不同类型的图表，包括条形图，温度计图和饼图。 今天，我们将通过在甘特图中构建和呈现数据来继续这一旅程。 与其他图表教程不同，我们将大量使用JavaScript来实现图表的各个方面。 您将可以将此基础用作将来项目的甘特图模板。 我们正在建立的甘特图 这是我们将要创建的图表（点击重新运行即可看到动画）。 它显示了一系列任务，明确...
flex滚动条三种实现方式
08-19
flex三种实现滚动条方式，其实是两种，样式的以两种表现形式写出了。然后，自定了一个滚动条
Flex双轴标注混合动态图表开发
swq的专栏
07-01 3655
对于企业级应用经常会开发一些动态的图表，基本的就不用说了Flex提供了多种图表，很方便大家完成任务。这里我就说一下典型的双轴混合动态图表的开发，相信大家在开发过程当中都遇到过这样的问题。 此处完全使用AS来实现柱状图与线图的组合，对应的mxml代码也很简单。 [Bindable]public var charSource:ArrayCollection = new ArrayCollection(
flex布局-xy轴,flex1, banner图,嵌套图片,底部问题
hello world
05-20 1115
x y轴问题主轴默认是x轴,设置主轴(x轴)上子元素的排列(默认)主轴 换轴是y 轴,设置主轴(x轴)上子元素的排列;
Flex lineChart图表如何自定义X轴Label
iteye_6377的博客
08-23 424
数据源是商品每天的价格，格式是{price:1000,date:2010-8-23}，用FLex的LineChart实现价格趋势图，其中X轴是日期，Y轴是价格，图表的内容可显示每月的价格（有详细数据点），或者显示每年的价格情况（无数据点）。现在的问题是：在显示年数据的时候，如何使得X轴的 Label只显示每月1号，如：2010-1-1，2010-2-1，horizontalAxisRenderer...
Flex弹性布局一文通【最全Flex教学】
一键难忘的博客
03-07 725
flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
使用flex布局实现局部滚动条
weixin_45272209的博客
07-14 4890
使用flex布局实现局部滚动条
Flex布局
lu__lala的博客
05-19 267
目录 容器属性 项目的属性 任何一个容器都可以指定为Flex布局 <style type="text/css"> .box{ /* 将父级元素box设置为flex容器 */ /* 父元素设置为flex之后，里面的子元素既然变成了一个行内块元素 */ /* flex里面的子元素都是行内块元素，能设置宽高，但是又不会换行*/ display: flex; } </style> 行内元素也可以使用Fle
flex排列方式（主轴X，测轴Y）
w_meng_zhao的博客
10-07 189
【代码】flex主轴，测轴排列方式。
flex 布局 弹性布局
u014105655的博客
07-12 173
flex 布局 弹性布局
使用JS实现滚动条同步效果
总结来说，实现原生JS控制多个滚动条同步跟随滚动效果，主要步骤包括设置元素样式以产生滚动条，监听滚动事件，并使用`scrollTop`属性同步滚动位置。通过合理优化，我们可以创建一个流畅且高效的同步滚动解决方案。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值