首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【开源 UI 组件】Flutter 图表范围选择器

前言 最近有一个小需求:图表支持局部显示,如下底部的区域选择器支持 左右拖动调节中间区域 拖拽中间区域,可以进行移动 图表数据根据中间区域的占比进行显示部分数据 ---- 这样当图表的数据量过大,不宜全部展示时...使用 chart_range_selector 目前这个范围选择器已经发布到 pub 上了,名字是 chart_range_selector。...使用者可以通过监听来获取当前区域的范围。这里的区域起止是以分率的形式给出的,也就是最左侧是 0 最右侧是 1 。如下的区域范围是 0.26 ~ 0.72 。...代码中通过 RangeData 可监听对象为绘制提供必要的数据,其中 minGap 用于控制范围的最小值,保证范围不会过小。...其中核心点是 domainAxis 可以通过 NumericAxisSpec 来显示某个范围的数据,而 ChartRangeSelector 提供拽的交互操作来更新这个范围,可谓相辅相成。

1.2K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS】347- 理解JavaScript中的变量、范围和提升

    三者之间的区别是基于范围、提升和重新分配。...关键字 范围 变量提升 可以重新分配 可以重新定义 var 功能范围 Yes Yes Yes let 阻止范围 No Yes No const 阻止范围 No No No 您可能想知道应该在自己的程序中使用这三种方法中的哪一种...然而,新的关键字let和const是块范围的。这意味着从任何类型的块(包括函数块、if语句、for和while循环)创建一个新的本地范围。...在这个例子的结果中,全局变量和块范围的变量都以相同的值结束。这是因为您不是使用var创建一个新的本地变量,而是在相同的范围内重新分配相同的变量。var不能识别是否属于不同的新范围。...由于let和const是块范围的,所以它们不会以这种方式提升,如下所示。

    1.8K10

    项目范围管理:范围定义

    定义范围是制定项目和产品详细描述的过程。 定义范围的主要作用是:明确所收集的需求哪些将包括在项目范围内,哪些将排除在项目范围外,从而明确项目、服务或输出的边界。...定义范围最重要的任务就是:详细定义项目的范围边界,范围边界是应该做的工作和不需要进行的工作分界线。...范围定义的输入: 范围管理计划,确定了制定、监督和控制项目范围的各种活动; 项目章程,包含对项目和产品特征的高层级描述。还包括了项目审批要求。...范围说明书:项目范围说明书是对项目范围、主要可交付成果、假设条件和制约因素的描述。项目范围说明书记录了整个范围,包括项目和产品范围。...项目范围边界一定是闭合的,否则我们就不能判断某变更是对原项目范围的变更还是新添加的项目范围。 项目范围说明书描述要做和不要做的工作的详细程度,决定着项目管理团队控制整个项目范围的有效程度。

    2.2K30

    【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )

    文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器选择器 id 选择器 通配符选择器 三、标签选择器 --...-- 1、简介 标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ; 标签选择器...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;

    2.8K20

    【CSS】CSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )

    文章目录 一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例 一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...的基础选择器 ; 标签选择器选择器 ID 选择器 通配符选择器 在实际开发中 , 基础选择器 不能满足 快速选择标签的需求 ; 复合选择器 是 由 两个以上 的 基础选择器 通过 各种方式 组合 而成的...选择器 ; 复合选择器 可以 更精准 更快速 地 选择 目标元素标签 ; 二、后代选择器 ---- 1、语法说明 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组...; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器选择器 { 属性名称1:属性值1; 属性名称2:属性值2...设置为 类选择器 .gradefather , 子选择器 也设置为 类选择器 .father2 , 孙子选择器 设置为 标签选择器 label , 那么将 label 标签内的文本设置为红色 , 则可以使用如下样式

    1.9K10

    js中Math.random()生成指定范围数值的随机数

    Math.random函数就不像php的rand函数一样可以生成指数范围的数据了,math.random只是生成了一个伪随机数,之后还要经过我们处理才行哦。...今天有又网友问到我 JavaScript 怎么生成指定范围数值随机数。Math.random() 这个方法相信大家都知道,是用来生成随机数的。...不过一般的参考手册时却没有说明如何用这个方法来生成指定范围内的随机数。这次我就来详细的介绍一下Math.random(),以及如何用它来生成制定范围内的随机数。...script type="text/javascript"> document.write(Math.random()); // 输出: 0.15246391076246546 如何生成指定范围值的随机数...生成指定范围数值随机数 所以,如果你希望生成1到任意值的随机数,公式就是这样的: // max - 期望的最大值 parseInt(Math.random()*max,10)+1; Math.floor

    4K40

    【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )

    文章目录 一、 ID 选择器 1、简介 2、代码示例 二、通配符选择器 1、简介 2、代码示例 三、CSS 选择器使用注意事项 一、 ID 选择器 ---- 1、简介 ID 选择器 使用 " #...id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 : 首先 , 在 HTML 中 设置 标签的 ID ; 标签内容 然后 , 在 CSS 样式中使用...* ID 选择器 与 类选择器 的使用方法基本一致 ;** 在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用 类选择器 ; 2、代码示例 代码示例 : <!...:20px; } 通配符选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ; 2、代码示例 通配符选择器代码示例 : 使用通配符选择器 * 将 HTML 所有页面标签的文本设置成了...---- CSS 选择器使用注意事项 : 尽量不使用 ID 选择器 ; 尽量不使用 通配符选择器 ; 使用标签选择器时 , 尽量不对 无意义的标签 进行选择 , 如 div , span 标签 ;

    2.7K10

    【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

    文章目录 一、子元素选择器 1、语法说明 2、代码分析 3、代码示例 二、交集选择器 1、语法说明 2、代码示例 一、子元素选择器 ---- 1、语法说明 子元素选择器 可以选择 某个基础选择器...选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选择器 写在前面 , 子选择器 写在后面 , 两个选择器之间使用 > 大于号隔开 ; 父选择器...父选择器 选择出的元素的 亲儿子 元素 中选择 , 孙子元素 和 重孙子元素 选择不到 ; CSS 基础选择器 : 标签选择器选择器 ID 选择器 通配符选择器 2、代码分析 在下面的代码中 ,...div 子元素 下面的标签中 , div 标签 的 字标签 是 p 标签 , 没有 label 标签 , 因此 没有可选择的元素 , 孙子标签不在子元素选择器范围之内...---- 1、语法说明 交集选择器 由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器 要求的标签 ; 交集选择器语法 : 两个基础选择器之间没有空格 ; 基础选择器1基础选择器

    4.4K10
    领券