a1871184137-CSDN博客

原创 2021SC@SDUSC f2源码分析（13）

2021SC@SDUSC如何按需引用群组入场动画const F2 = require('@antv/f2/lib/core');const GroupAnimation = require('@antv/f2/lib/animation/group');F2.Chart.plugins.register(GroupAnimation); // 这里进行全局注册，也可以给 chart 的实例注册精细动画版本const F2 = require('@antv/f2/lib/core');

2021-12-19 13:44:22 110

原创 2021SC@SDUSC f2源码分析（12）

2021SC@SDUSCsize将数据值映射到图形的大小上的方法。chart.point.size(10); // 常量chart.point.size('type'); // 使用字段映射到大小chart.point.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值chart.point.size('type', type => { // 回调函数 if (type === 'a') { return 10; }

2021-12-19 13:43:18 101

原创 2021SC@SDUSC f2源码分析（11）

2021SC@SDUSC几何标记对象，决定了图表的类型，具体的概念介绍请参见Geom。语法示例：chart.<geomType>() .position() .size() .color() .shape() .adjust() .style() .animate();下面是一条简单的绘制柱状图的语法，声明完使用的 geom 类型之后，就可以进行图形上的各种图形属性映射，下面我们会进行详述。chart.interval().position(.

2021-12-19 13:42:28 126

原创 2021SC@SDUSC f2源码分析（10）

2021SC@SDUSCupperFirstupperFirst(s)●描述：将字符串的第一个字母转换成大写●参数：String 类型●返回：返回首字母大写后的字符串lowerFirstlowerFirst(s)●描述：将字符串的第一个字母转换成小写●参数：String 类型●返回：返回首字母小写后的字符串isStringisString(value)●描述：判断是否是字符串●参数：任意类型的值●返回：返回判断结果isNumberisNumber(value)●描述：判

2021-12-06 17:28:32 93

原创 2021SC@SDUSC f2源码分析（9）

2021SC@SDUSC根据数据的类型，F2 支持以下几种度量类型：identity，常量类型的数值，也就是说数据的某个字段是不变的常量；linear，连续的数字 [1, 2, 3, 4, 5]；cat，分类, ['男','女']；timeCat，时间类型；在 F2 的使用中，我们主要通过列定义操作来接触度量：const data = [ { a: 'a', b: 20 }, { a: 'b', b: 12 }, { a: 'c', b: 8 },];con

2021-12-06 17:26:57 393

原创 2021SC@SDUSC f2源码分析（8）

2021SC@SDUSC几何标记对象，决定了图表的类型语法示例：chart.<geomType>() .position() .size() .color() .shape() .adjust() .style() .animate();下面是一条简单的绘制柱状图的语法，声明完使用的 geom 类型之后，就可以进行图形上的各种图形属性映射chart.interval().position('x*y').color('x');

2021-11-26 17:57:23 328

原创 2021SC@SDUSC f2源码分析（7）

2021SC@SDUSCTooltip 作为 F2 的插件，如要使用，请将其注册如 Chart 类或者 chart 实例。如果你默认加载的是完整的 F2 代码，那么 Tooltip 已经注册至 Chart 类中，如果您采用动态引用的策略，那么需要先将该组件注册入 Chart 类或者 Chart 实例。const F2 = require('@antv/f2/lib/core');const Tooltip = require('@antv/f2/lib/plugin/tooltip');F

2021-11-15 10:24:56 700

原创 2021SC@SDUSC f2源码分析（6）

geometry.label() 是将数据值映射到图形的文本上的方法，共有六种传入方法：第一种传入 false，不展示 labelgeometry.label(false);第二种传入字段名，在每个图形上显示对应的字段对应的数值。(field: string) => Geometry;geometry.label('x');第三种传入字段名和配置项，配置显示细节(field: string, secondParam: GeometryLabelCfg) =&g

2021-11-08 12:48:05 256

原创 2021SC@SDUSC f2源码分析（5）

2021SC@SDUSCyAlign元素与y坐标在垂直方向的对齐方式。'top'目标元素的顶部与y对齐。 'middle'目标元素的中心与y对齐。 'bottom'目标元素与的底部与y对齐。fill当提供的fill属性值为对象时，表示使用渐变色填充，否则使用字符串颜色填充。rect.attr('body/fill', { type: 'linearGradient', stops: [ { offset: '0%', color: ...

2021-10-26 18:20:24 154

原创 2021SC@SDUSC f2源码分析（4）

2021SC@SDUSCef指向一个元素的 CSS 选择器，指代的元素是那些以ref开头的属性的参照元素。refX设置元素x坐标，目标x坐标相对于ref指代的参照元素的左上角x坐标（参照x坐标）当其值在[0, 1]之间或为百分比（如50%）时，表示目标x坐标是参照x坐标相对于参照元素宽度百分比的相对偏移量。例如refX: 0.5表示，目标x坐标在参照x坐标基础上，向右偏移参照宽度的50%。当其值<0或>1时，表示...

2021-10-26 18:18:08 200

原创 2021SC@SDUSC f2源码分析（3）

2021SC@SDUSC启用Scroller后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。const graph = new Graph({ scroller: { enabled: true, }, minimap: { enabled: true, container: minimapContainer, }})支持的选项如下：interface MiniMapOptions { enabled:..

2021-10-17 18:05:33 92

原创 2021SC@SDUSC f2源码分析（2）项目综述

2021SC@SDUSC图表 - ChartG2 的 View 是图层容器的概念，每一个 View 拥有自己独立的数据源、坐标系、几何标记、Tooltip 以及图例，可以理解 View 是整个 G2 体系中，用来组装数据，Component，Geometry 的容器。一个 View 可以包含有多个子 View，通过这种嵌套关系，可以将一个画布按照不同的布局划分多个不同区域（分面），也可以将不同数据源的多个 View 叠加到一起，形成一个多数据源，多图层的图表。而 Chart 是继承自 Vi

2021-10-10 20:20:22 304

原创 2021SC@SDUSC f2源码分析（1）项目综述

2021SC@SDUSCf2概述功能F2是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。拥有完备的图形语法理论和专业的移动设计指引，能满足各种可视化需求。特性专注移动，体验优雅在“准确、有效、清晰、美”的可视化原则的基础之上，结合移动设备特性（规格不一，计算能力不足和触摸界面）以及人们对移动设备的使用习惯，我们从设计、性能以及多端异构三个角度出发，为用户提供移动端图表的最佳实践。轻量化呈现，自然反..

2021-09-29 08:54:44 125

a1871184137的博客