├── bizCharts ├── en │ ├── index.md │ ├── quickStart.md │ └── overview.md └── zh │ ├── docs │ ├── data.md │ ├── interaction.md │ ├── theme.md │ ├── needload.md │ ├── start.md │ ├── animate.md │ ├── chart.md │ ├── dataflow.md │ ├── chartType.md │ ├── qa.md │ └── dataset.md │ └── api │ ├── view.md │ ├── connector.md │ ├── label.md │ ├── graphic.md │ ├── facet.md │ ├── bizcharts.md │ ├── coord.md │ ├── sliderPlugin.md │ ├── scale.md │ ├── shape.md │ ├── geom.md │ ├── axis.md │ ├── tooltip.md │ ├── chart.md │ ├── dataset.md │ ├── legend.md │ ├── theme.md │ └── guide.md ├── bizGoblin ├── en │ └── index.md └── zh │ ├── docs │ ├── qa.md │ ├── chart.md │ └── start.md │ └── api │ ├── coord.md │ ├── chart.md │ ├── tooltip.md │ ├── axis.md │ ├── geom.md │ ├── legend.md │ └── guide.md ├── README.md ├── .DS_Store └── LICENSE /bizCharts/en/index.md: -------------------------------------------------------------------------------- 1 | * 1 -------------------------------------------------------------------------------- /bizGoblin/en/index.md: -------------------------------------------------------------------------------- 1 | * 2 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bx-docs 2 | bx下各产品的文档管理仓库 3 | -------------------------------------------------------------------------------- /bizCharts/en/quickStart.md: -------------------------------------------------------------------------------- 1 | * en bizchartsquickStart -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/bx-docs/master/.DS_Store -------------------------------------------------------------------------------- /bizGoblin/zh/docs/qa.md: -------------------------------------------------------------------------------- 1 | # 常见问题 2 | 3 | ## 有问题怎么办 4 | 5 | - 建议将所有问题相关的教程、api文档及相关的 demo 都看一遍，如果还有问题，欢迎提 [issue](https://github.com/alibaba/BizGoblin/issues) 6 | - issue 中请务必提供可复现的链接，方便排查问题。链接可以在 Codepen 中 fork [Bizcharts codepen template](https://codepen.io/leslie2014/pen/xjJGER) 后生成。 7 | - 使用过程中如果遇到问题无法自行解决，可扫码加入钉钉群群求帮助 8 | 9 |

-------------------------------------------------------------------------------- /bizCharts/zh/docs/data.md: -------------------------------------------------------------------------------- 1 | 2 | # 源数据的处理 3 | 4 | *文档转自G2* 5 | 6 | **BizCharts 支持两种格式的源数据** 7 | - JSON数组 8 | - DataView 对象 9 | 10 | ### JSON 数组 11 | Example: 12 | 13 | ```js 14 | var data = [ 15 | {"gender":"男","count":40}, 16 | {"gender":"女","count":30} 17 | ]; 18 | ``` 19 | 20 | ### DataView 对象 21 | * 单独使用 DataView 22 | * 如果仅仅是对数据进行加工，不需要图表联动 23 | 24 | * 通过状态量实现图表联动 25 | 在G2 3.0 中使用 DataSet 的状态量(State) 可以很容易的实现图表的联动，步骤如下： 26 | 1. 创建 DataSet 对象，指定状态量 27 | 2. 创建 DataView 对象，在 transform 中使用状态量 28 | 3. 创建图表，引用前面创建 DataView 29 | 4. 改变状态量，所有 DataView 更新 30 | 31 | 32 | 详见 [DataSet Package](./dataset)。 33 | -------------------------------------------------------------------------------- /bizGoblin/zh/docs/chart.md: -------------------------------------------------------------------------------- 1 | 2 | # 图表构成 3 | 4 | ## 组件构成 5 | 在 BizGoblin 中，图表是由各个组件组合而成的。 6 | 7 | 图表组件有： 8 | 9 | | 名称 | 说明 | 10 | | :--- | :-- | 11 | | [Chart](../api/chart.md) | 图表组件，所有的其他组件都必须由 `` 包裹。 | 12 | | [Coord](../api/coord.md) | 坐标系组件。用来描述 `` 组件的坐标系，比如笛卡尔坐标系、极坐标系等。 | 13 | | [Axis](../api/axis.md) | 坐标轴组件。通常包含两个坐标轴，在笛卡尔坐标系下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）以及网格线（grid）组成。| 14 | | [Geom](../api/geom.md) | 几何标记组件。即我们所说的点、线、面这些几何图形。| 15 | | [Legend](../api/legend.md) | 图例组件 | 16 | | [Tooltip](../api/tooltip.md) | 提示框组件。| 17 | | [Guide](../api/guide.md) | 辅助标记组件。| 18 | 19 | ## 控件构成 20 | 下图所示为常用图表的各组件的空间构成。 21 | 22 | ![](https://cdn.yuque.com/lark/0/2018/png/49761/1530017962762-1ef72d25-5f0e-4ed3-b96a-7db98175fec1.png) 23 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/interaction.md: -------------------------------------------------------------------------------- 1 | 2 | # 图表交互 3 | 4 | ## 默认交互 5 | 包括： 6 | - active 激活，鼠标hover。 7 | - select 选中，鼠标点击选择、框选。 8 | 9 | ## 激活 10 | 开启以及关闭 shape 对于鼠标 hover 时的响应效果，默认为各个 `` 内置了 active 效果。可以通过 *active* 属性关闭及开启。 11 | 例如： 12 | ```js 13 | 14 | 15 | ``` 16 | 17 | ## 选中 18 | 各个几何标记 geom 选中的模式包含如下三种： 19 | 1. 不可选中； 20 | 2. 单选； 21 | 3. 多选； 22 | 4. 选中是否可取消选中。 23 | 24 | 选中模式的设置方式如下： 25 | 26 | ```js 27 | ; // 关闭 28 | ; // 打开 29 | ; 35 | ``` 36 | 37 | 默认情况下，G2 中只有饼图支持选中交互，其他 geom 的选中模式默认情况下都是关闭的。 38 | 39 | **图表交互控制可以跟[图表事件](../api/chart#event)结合用来定制图表的自定义交互** 40 | 41 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/theme.md: -------------------------------------------------------------------------------- 1 | 9 | 10 | # 主题 11 | 12 | **引用: [G2 Theme](https://antv.alipay.com/zh-cn/g2/3.x/tutorial/theme.html)** 13 | 14 | ## 图表主题 15 | Bizcharts 提供了两种内建的主题: `default` and `dark`. 16 |

17 | 18 | ## 如何改变主题 19 | 20 | 你可以通过 `BizCharts.setTheme(themeName)` API 来改变主题. 21 | 22 | Exmaple: 23 | 24 | ```js 25 | BizCharts.setTheme('dark'); 26 | ``` 27 | 28 | ## 自定义主题 29 | 当调用 `BizCharts.setTheme()` API 传入的参数是一个对象时，这个时候代表使用你自定义的主题配置。 30 | 31 | Example: 32 | ```js 33 | const seaTheme = { 34 | animate:false, 35 | colors:{}, 36 | shapes:{}, 37 | }; 38 | BizCharts.setTheme(seaTheme); 39 | ``` 40 | 41 | 更多的自定义配置项, 请参考 [Theme API](../api/theme) 42 | -------------------------------------------------------------------------------- /bizCharts/en/overview.md: -------------------------------------------------------------------------------- 1 | ## bizChart 2 | * bizChart is a lightweight and robust JavaScript charting library with great API, documentation, and enterprise-grade support. 3 | 4 | * It's been developed since 2003 with one main idea - it should be easy for any developer to integrate beautiful charts into any mobile, desktop or web product. As a result, AnyChart today is a data visualization layer for thousands of great products. Our clients include both Fortune 500 companies and startups. 5 | 6 | * Our component works with any database and runs on any platform. The source code is open - you can download and edit it, it gives a great flexibility. Accessibility feature is a very important for us - we completely support Section 508 requirements. Thousands of out-of-the-box code samples in our playground, plugins and integrations, ready-to-use business solutions allow implementing industry-standard visualizations in minutes. -------------------------------------------------------------------------------- /bizGoblin/zh/api/coord.md: -------------------------------------------------------------------------------- 1 | 2 | # Coord 3 | 4 | 两种位置标度结合在一起组成的坐标轴配置，将Coord抽离为一个单独的组件，并且包含两种类型坐标系极坐标系和笛卡尔坐标系。 5 | 6 | ## 使用说明 7 | ### 父组件 8 | - [``](./chart.md) 9 | 10 | ### 子组件 11 | - none 12 | 13 | ### 注意事项 14 | 15 | - 默认采用笛卡尔坐标系，若要改变坐标系可以通过 `type` 属性改变。 16 | - 极坐标默认的起始角度和结束角度如下图所示： 17 |

18 | 19 | ## API 20 | 21 | #### `type` 22 | * 类型：String 23 | * 描述：坐标系类型，不同类型的坐标系所支持的配置属性也不一样。可设置的值为 `rect` , `polar‘` 。默认 `rect` 直角坐标系。 24 | 25 | #### `transposed` 26 | * 类型：Boolean 27 | * 描述：坐标系是否发生转置，`true` 表示发生了转置。默认 `false`。 28 | 29 | #### `radius` 30 | * 类型：Number 31 | * 描述：极坐标的前提下，设置圆的半径，相对值，0 至 1 范围。 32 | 33 | #### `innerRadius` 34 | * 类型：Number 35 | * 描述：极坐标的前提下，绘制环图时，设置内部空心半径，相对值，0 至 1 范围。 36 | 37 | #### `startAngle` 38 | * 类型：Number 39 | * 描述：极坐标的起始角度，弧度制。 40 | 41 | #### `endAngle` 42 | * 类型：Number 43 | * 描述：极坐标的结束角度，弧度制。 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 alibaba-bizcharts 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /bizCharts/zh/api/view.md: -------------------------------------------------------------------------------- 1 | 2 | # View 3 | 4 | 视图，由 Chart 生成和管理，拥有自己独立的数据源、坐标系和图层，用于异构数据的可视化以及图表组合，一个 Chart 由一个或者多个视图 View 组成。因此 view 上的 api 同 chart 基本相同。 5 | 6 | ## 使用说明 7 | ### 父组件 8 | [``](chart) 9 | 10 | ### 子组件 11 | [``](coord) [``](axis) [``](geom) [``](legend) [``](tooltip) [``](guide) [``](facet) [``](view) 12 | 13 | **实际开发过程中，很多图表都可以采用View组件来实现，包含但不限于以下几个方面：** 14 | 15 | * 在同一个容器中出现两个或者更多不同坐标系的图表时，可以采用View组件来实现，如下图所示；[Demo](../demo/detail?id=pie-multi-level&selectedKey=饼图) 16 | ![image | center](https://img.alicdn.com/tfs/TB1GqOTa4rI8KJjy0FpXXb5hVXa-1600-856.png) 17 | 18 | * 同一个容器中的两个图表需要采用不同的数据源时，如下图所示：[Demo](../demo/detail?id=funnel-basic&selectedKey=漏斗图) 19 | ![image | center](https://img.alicdn.com/tfs/TB1w1flbhrI8KJjy0FpXXb5hVXa-1600-856.png) 20 | 21 | 22 | ```js 23 | // 这里只显示部分核心代码 24 | 25 | 26 | 31 | 32 | 33 | 38 | 39 | 40 | ``` 41 | **实际开发过程中，想要在一个图表中使用多个数据源可以用 view 实现。** 42 | [demo](https://bizcharts.net/products/bizCharts/demo/detail?id=g2-compare-donut&selectedKey=%E6%A6%82%E8%A7%88) 43 | 44 | ## API 45 | #### `start` 46 | * 类型：Object 47 | * 描述：绘制区域的起始坐标，x和y的取值范围均为0到1。 48 | 我们的起始点是从**左上角**开始的。 49 | 参见: 50 | 51 | ```js 52 | 53 | ``` 54 | 55 | #### `end` 56 | * 类型：Object 57 | * 描述：绘制区域的结束坐标，x和y的取值范围均为0到1。 58 | 59 | 参见: 60 | ```js 61 | 62 | ``` 63 | 64 | #### `data` 65 | * 类型：Array | DataSet 66 | * 描述：使用同 `Chart` 的 [data 属性](chart#data)。 67 | 68 | #### `animate` 69 | * 类型：boolean 70 | * 描述：视图是否执行动画。 71 | * 默认值:`true`。 72 | 73 | #### `scale` 74 | * 类型：Object 75 | * 描述：使用同 `Chart` 的 [scale 属性](chart#scale)。 76 | 77 | #### `filter` 78 | * 类型：Object 79 | * 描述：使用同 `Chart` 的 [filer 属性](chart#filter)。 80 | -------------------------------------------------------------------------------- /bizGoblin/zh/docs/start.md: -------------------------------------------------------------------------------- 1 | 2 | # BizGoblin 3 | 4 | BizGoblin 是一个基于F2封装的React图表库，具有F2、React的全部优点，可以让用户以组件的形式组合出无数种移动端图表。 5 | 6 | ## 特性 7 | - 基于 F2、React 8 | - 体积小巧 9 | - 高扩展能力 10 | - 绘制迅速 11 | 12 | ## 安装 13 | 14 | 需要使用版本 15 及以上的 React，来使用 BizGoblin 15 | 16 | ### 通过 npm 引入 17 | 18 | 我们提供了 BizGoblin npm 包，通过下面的命令即可完成安装 19 | 20 | ```bash 21 | npm install bizgoblin --save 22 | ``` 23 | 24 | 成功安装完成之后，即可使用 import 或 require 进行引用。 25 | 26 | ## 快速开始 27 | 28 | 在 BizGoblin 引入页面后，我们就已经做好了创建第一个图表的准备了。 29 | 30 | 下面是以一个基础的面积图为例开始我们的第一个图表创建。 31 | 32 | 1. 创建容器 33 | 34 | 在页面的 *body* 部分创建一个节点，指定一个 id 35 | 36 | ```html 37 |

38 | ``` 39 | 40 | 2. 使用组件生成图表 41 | 42 | - 引入图表需要的组件 43 | - 用组件组装成需要的图表 44 | - 把图表渲染到 mountNode 节点上 45 | 46 | ```jsx 47 | import React from 'react'; 48 | import ReactDOM from 'react-dom'; 49 | import { Chart, Axis, Geom, Tooltip } from 'bizgoblin'; 50 | 51 | // 数据源 52 | const data = [ 53 | { time: 'Jan.', tem: 1000}, 54 | { time: 'Feb.', tem: 2200}, 55 | { time: 'Mar.', tem: 2000}, 56 | { time: 'Apr.', tem: 2600}, 57 | { time: 'May.', tem: 2000}, 58 | { time: 'Jun.', tem: 2600}, 59 | { time: 'Jul.', tem: 2800}, 60 | { time: 'Aug.', tem: 2000} 61 | ]; 62 | 63 | // 度量配置 64 | const defs = [ 65 | { dataKey: 'time', range: [0, 1] }, 66 | { dataKey: 'tem', tickCount: 5, min: 0 } 67 | ]; 68 | 69 | // 渲染图表 70 | ReactDOM.render(( 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | ), document.getElementById('id')); 79 | 80 | ``` 81 | 82 | 一张柱状图就绘制成功了： 83 | 84 | ![](https://cdn.yuque.com/lark/0/2018/png/49761/1530019800146-e346143b-9fbb-415f-9eb8-be2718200281.png) 85 | 86 | ## 体验改进计划说明 87 | 为了更好服务用户，F2 会将打点监控，将 URL 等信息发送回 AntV 服务器，BizGoblin 没有关闭这个请求：```https://kcart.alipay.com/web/bi.do``` 88 | 89 | 除了 URL 与 F2 版本信息外，不会收集任何其他信息，一切为了能对 F2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭： 90 | 91 | ```js 92 | // 关闭 F2 的体验改进计划打点请求 93 | BizGoblin.track(false); 94 | ``` 95 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/needload.md: -------------------------------------------------------------------------------- 1 | # 按需加载 2 | 3 | 自 bizcharts@3.1.8 版本起，开始支持按需加载资源文件的功能。 4 | 5 | ## 做法 6 | g2 中资源主要是分为 core 和对应个 geom 资源，g2 用户需要声明使用了哪个 [geom](https://github.com/antvis/g2/issues/364)。 7 | - 在 bizcharts 中也类似，需要用户自己声明需要加载的资源模块,因此加入了各个类别的 geom 组件，具体有： 8 | 9 | | 组件 | 说明 | 10 | | :--| :--| 11 | | ```` | 相当于 ```` | 12 | | ```` | 相当于 ```` | 13 | | ```` | 相当于 ```` | 14 | | ```` | 相当于 ```` | 15 | | ```` | 相当于 ```` | 16 | | ```` | 相当于 ```` | 17 | | ```` | 相当于 ```` | 18 | | ```` | 相当于 ```` | 19 | | ```` | 相当于 ```` | 20 | | ```` | 相当于 ```` | 21 | 22 | 23 | ** 因此如果想要按需加载 bizcharts 资源，请使用命名后的 geom 组件，例如 `` `` 等，请勿使用之前的组件，否则会全量加载 geom 资源。 ** 24 | 25 | - 需要使用原先 bizcharts 上的工具函数，请加载 ``import Chart from 'bizcharts/lib/core'`` 26 | 具体有： 27 | 28 | | 资源 | 说明 | 29 | | :--| :--| 30 | | G2 | G2 的命名空间,[详细请点击](//antv.alipay.com/zh-cn/g2/3.x/api/index.html). | 31 | | Animate | 动画 [详细请点击](../api/bizcharts#animate). | 32 | | Shape | 构成图表的图形，用户自定义图形，[详细请点击](../api/bizcharts#setTheme) | 33 | | setTheme | 用于设置图表的主题,[详细请点击](../api/bizcharts#setTheme). | 34 | | track | 使用打点，[详细请点击](../api/bizcharts#track) | 35 | | PathUtil | [详细请点击](../api/bizcharts#PathUtil) | 36 | | Util | [详细请点击](../api/bizcharts#Util) | 37 | 38 | 39 | ## 示例代码 40 | 直接加载需要的组件和模块使用即可。 41 | 42 | ```js 43 | import * as bizUtil from 'bizcharts/lib/core' 44 | import Chart from 'bizcharts/lib/components/Chart'; 45 | import Axis from 'bizcharts/lib/components/Axis'; 46 | import Line from 'bizcharts/lib/components/TypedGeom/Line'; 47 | 48 | bizUtil.setTheme('dark'); 49 | 50 | ReactDOM.render( 51 | 66 | 67 | 68 | 69 | , 70 | mountNode 71 | ); 72 | ``` 73 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/start.md: -------------------------------------------------------------------------------- 1 | 2 | # BizCharts 3 | 4 | ## 特性 5 | - 是基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表 6 | - 集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等 7 | - 性能稳定且具有强大的扩展能力和高度自定义能力 8 | 9 | ## 如何获取 BizCharts 10 | 11 | 你可以通过以下几种方式获取 BizCharts： 12 | 1. 从官网下载界面选择你需要的版本下载，建议使用 3.1.10 版本 13 | 2. 在 BizCharts 的 GitHub 上下载最新的 release 版本 14 | 3. 通过 npm 获取 BizCharts，我们提供了 BizCharts npm 包，通过下面的命令即可完成安装 15 | 16 | ```bash 17 | npm install bizcharts --save 18 | ``` 19 | 20 | 成功安装完成之后，即可使用 import 或 require 进行引用。 21 | 22 | ## 绘制一个简单的图表 23 | 24 | 在 BizCharts 引入页面后，我们就已经做好了创建第一个图表的准备了。 25 | 26 | 下面是以一个基础的柱状图为例开始我们的第一个图表创建。 27 | 28 | 1. 创建容器 29 | 30 | 在页面的 *body* 部分创建一个节点，指定一个 id 31 | 32 | ```html 33 |

34 | ``` 35 | 36 | 2. 使用组件生成图表 37 | 38 | - 引入图表需要的组件 39 | - 用组件组装成需要的图表 40 | - 把图表渲染到 mountNode 节点上 41 | 42 | ```js 43 | import React from 'react'; 44 | import ReactDOM from 'react-dom'; 45 | import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts'; 46 | 47 | // 数据源 48 | const data = [ 49 | { genre: 'Sports', sold: 275, income: 2300 }, 50 | { genre: 'Strategy', sold: 115, income: 667 }, 51 | { genre: 'Action', sold: 120, income: 982 }, 52 | { genre: 'Shooter', sold: 350, income: 5271 }, 53 | { genre: 'Other', sold: 150, income: 3710 } 54 | ]; 55 | 56 | // 定义度量 57 | const cols = { 58 | sold: { alias: '销售量' }, 59 | genre: { alias: '游戏种类' } 60 | }; 61 | 62 | // 渲染图表 63 | ReactDOM.render(( 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | ), document.getElementById('mountNode')); 72 | 73 | ``` 74 | 75 | 一张柱状图就绘制成功了： 76 | 77 | ![](https://img.alicdn.com/tps/TB1PVaoPFXXXXcSaXXXXXXXXXXX-519-401.png) 78 | 79 | ## Dependencies 80 | 81 | ```json 82 | { 83 | "peerDependencies": { 84 | "react": "^15.0.0 || ^16.0.0" 85 | }, 86 | "dependencies": { 87 | "@antv/g2": "3.2.2", 88 | "invariant": "^2.2.2", 89 | "warning": "^3.0.0", 90 | "prop-types": "^15.6.0", 91 | }, 92 | } 93 | ``` 94 | 95 | ## Browser Support Versions 96 | 支持Chrome，Safari，IE11+ 浏览器 97 | 98 | 99 | 100 | ## 体验改进计划说明 101 | G2 decided to terminate the "Experience Improvement Program". In verson @antv/g2@3.4.7（released at 2018.12.26） and above, all tracking code is removed, no unexpected remote request will be sent while you are using G2. And Bizcharts Upgrade the dependent version the first time at 2018.12.26 24:00. 102 | -------------------------------------------------------------------------------- /bizGoblin/zh/api/chart.md: -------------------------------------------------------------------------------- 1 | 2 | # Chart 3 | 4 | 图表组件，内部生产了一个F2 chart 实例，同时控制着其他子组件的加载和更新。 5 | 6 | ## 子组件 7 | 8 | - [``](coord.md) 坐标系组件 9 | - [``](axis.md) 坐标轴组件 10 | - [``](geom.md) 几何标记组件 11 | - [``](legend.md) 图例组件 12 | - [``](tooltip.md) 提示框组件 13 | - [``](guide.md) 辅助标记组件 14 | 15 | ```js 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ``` 24 | 25 | ## API 26 | 27 | #### `width` 28 | * 类型： Number | string(必填) 29 | * 描述：指定图表的宽度，传入参数为Number类型，单位为 `px` 。支持自适应单位百分比和rem，例如 `100%` 和 `10rem` 。 30 | 31 | #### `height` 32 | * 类型：Number | string 33 | * 描述：指定图表的高度，传入参数为Number类型，单位为 `px` 。支持自适应单位百分比和rem，例如 `100%` 和 `10rem` 。 34 | 35 | > 传入参数为string类型，为百分比字符串时，取父元素的相对值；为'rem'结束的字符串时，取HTML根元素的相对值 36 | 37 | #### `data` 38 | * 类型：Array 39 | * 描述：设置图表的数据源，`data` 是一个包含 JSON 对象的数组。 40 | 41 | #### `defs` 42 | * 类型： Object | Array 43 | * 描述：各个字段的度量配置，`defs` 是一个 JSON 对象或者包含 JSON 对象的数据。JSON 对象的 `dataKey` 代表对应列字段，必填。 44 | 45 | 图表数据的列定义用于对数据字段进行定义，如数据的类型，显示别名，数值的格式化等，不同的数字类型的配置项不同，支持的数据类型有： 46 | 47 | - `linear`: 数字类型 48 | - `cat`: 分类类型 49 | - `timeCat`: 时间类型 50 | 51 | ```js 52 | const defs = [ 53 | { 54 | dataKey: 'value', // 数据列字段，必填 55 | type: 'linear' | 'cat' | 'timeCat', // 指定数据类型, 默认linear 56 | formatter: () => {}, // 格式化文本内容 57 | range: array, // 输出数据的范围，默认[0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1 范围的数据 58 | alias: string, // 数据字段的显示别名 59 | tickCount: number, // 设置坐标轴上刻度点的个数 60 | ticks: array // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示 61 | } 62 | ] 63 | ``` 64 | 65 | > 不同的type具有各自对应的可配置属性，详见[Scale度量](https://antv.alipay.com/zh-cn/f2/3.x/api/scale.html) 66 | 67 | #### `padding` 68 | * 类型：Object | Number | Array 69 | * 描述：图表内边距。 70 | 有如下配置格式。 71 | ```js 72 | //有时候坐标轴、图例等绘图区域外的组件显示不全时，可以通过调整图表各个方向的 padding 来调整最终效果 73 | 74 | 75 | 76 | 77 | 78 | 79 | ``` 80 | - padding 为数字以及数组类型时使用方法同 CSS 盒模型。 81 | - padding 中存在 'auto'，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框。 82 | 83 | - 另外也支持设置百分比，如 padding: [ '20%', '30%' ]，该百分比相对于整个图表的宽高。 84 | - padding 为数字以及数组类型时使用方法同 CSS 盒模型。 85 | - padding 中存在 'auto'，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框。 86 | 87 | #### `pixelRatio` 88 | * 类型：Number 89 | * 描述：屏幕画布的像素比，默认值1，一般情况下这个值可以设置成 `window.devicePixelRatio` 。 90 | -------------------------------------------------------------------------------- /bizCharts/zh/api/connector.md: -------------------------------------------------------------------------------- 1 | # Connector 数据接入 2 | 3 | 一个数据视图（DataSet.View）实例在接入数据时就会用到 Connector，其语法如下： 4 | 5 | ```js 6 | dv.source(data, { 7 | type: connectorName, 8 | ...otherOptions 9 | }); 10 | ``` 11 | 12 | 举个例子： 13 | 14 | ```js 15 | const testCSV = `Expt,Run,Speed 16 | 1,1,850 17 | 1,2,740 18 | 1,3,900 19 | 1,4,1070`; 20 | 21 | const dv = new DataSet.View().source(testCSV, { 22 | type: 'csv' 23 | }); 24 | 25 | console.log(dv.rows); 26 | /* 27 | * dv.rows: 28 | * [ 29 | * {Expt: " 1", Run: "1", Speed: "850"} 30 | * {Expt: " 1", Run: "2", Speed: "740"} 31 | * {Expt: " 1", Run: "3", Speed: "900"} 32 | * {Expt: " 1", Run: "4", Speed: "1070"} 33 | * ] 34 | */ 35 | ``` 36 | 37 | 上述代码中，数据视图实例 `dv` 使用 `csv` 类型的 Connector 载入了一段 CSV 文本。 38 | 39 | 目前 DataSet 支持以下几种常用的 Connector： 40 | 41 | ## default 默认 42 | 43 | 直接调用 `dv.source(data)`，不通过配置项指定使用的 Connector 时，则有以下两种默认的情形： 44 | 45 | 第一种，data 传入的是具体数组数据，那么 46 | 47 | ```js 48 | dv.rows = deepClone(data); 49 | ``` 50 | 51 | 第二种，data 传入的是另一个 DataView 的实例或者实例的名称，那么 52 | 53 | ```js 54 | dv.rows = deepClone(ds.getView(otherDv).rows); 55 | ``` 56 | 57 | ## dsv 58 | 59 | 具体用法见示例： 60 | 61 | ```js 62 | dv.source(dsvStr, { 63 | type: 'dsv', // 指定使用dsv connector 64 | delimiter: '|' // 指定分隔符 65 | }) 66 | ``` 67 | 68 | ## csv 69 | 70 | 具体用法见示例： 71 | 72 | ```js 73 | dv.source(csvStr, { 74 | type: 'csv', // 指定使用dsv connector 75 | delimiter: ',' // 指定分隔符 76 | }) 77 | ``` 78 | 79 | ## tsv 80 | 81 | 具体用法见示例： 82 | 83 | ```js 84 | dv.source(tsvStr, { 85 | type: 'tsv' // 指定使用tsv connector 86 | }) 87 | ``` 88 | 89 | ## GeoJSON 90 | 91 | 具体用法见示例： 92 | 93 | ```js 94 | dv.source(geojsonData, { 95 | type: 'GeoJSON', // 别名 geo / geojson 96 | }) 97 | ``` 98 | 99 | > dv.dataType 会被更改为 'geo'，从而 dv 可以执行一些 Geo 相关的实例方法。 100 | 101 | ## TopoJSON 102 | 103 | 具体用法见示例： 104 | 105 | ```js 106 | dv.source(topojsonData, { 107 | type: 'TopoJSON', // 别名 topojson 108 | object: 'xxx' // TopoJSON 相当于多个 GeoJSON 合并起来做了压缩，其中每一个 object 都相当于一份 GeoJSON 数据，指定 object 就是从中提取一份 Geo 数据 109 | }) 110 | ``` 111 | 112 | > dv.dataType 会被更改为 'geo'，从而 dv 可以执行一些 Geo 相关的实例方法。 113 | 114 | ## hierarchy 115 | 116 | 具体用法见示例： 117 | 118 | ```js 119 | dv.source(tree, { 120 | type: 'hierarchy', // 别名 tree 121 | children: d => d.children // 可选，函数，返回子树 122 | }) 123 | ``` 124 | 125 | > dv.dataType 会被变更为 'hierarchy' ，从而 dv 可以执行一些树形结构相关的实例方法和 Transform。 126 | 127 | > dv.root 为根节点 128 | 129 | ## graph 130 | 131 | 具体用法见示例： 132 | 133 | ```js 134 | dv.source(graph, { 135 | type: 'graph', 136 | nodes: d => d.nodes, // 节点集对应字段 137 | edges: d => d.edges // 边集对应字段 138 | }) 139 | ``` 140 | 141 | > dv.dataType 会被变更为 'graph'，从而 dv 可以执行图相关的实例方法和 Transform。 142 | -------------------------------------------------------------------------------- /bizCharts/zh/api/label.md: -------------------------------------------------------------------------------- 1 | 2 | # Label 3 | 4 | [``](geom) 几何标记上的标注文本组件。 5 | 6 | ## 父组件 7 | [``](geom) 8 | 9 | ## 子组件 10 | 无 11 | 12 | ## API 13 | #### `content` 14 | * 类型：String | Array:[String, Function] 15 | * 描述：指定 label 上显示的文本内容，可以是数据纬度，也可以自定义。 16 | 17 | 使用示例: 18 | ```js 19 | 20 | // 使用数据 21 | 22 | // 使用回调函数 23 | { 24 | return `${data}:${sales}`; 25 | }]} 26 | /> 27 | ``` 28 | 29 | #### `labelLine` 30 | * 类型：Object 31 | * 描述：文本距离几何线的配置，如果值为`false`，表示不展示文本线。默认不展示。 32 | 33 | 使用示例: 34 | ```js 35 | 43 | ``` 44 | 45 | #### `offset` 46 | * 类型：Number 47 | * 描述：设置文本距离几何图形的的距离 48 | 49 | #### `textStyle` 50 | * 类型：Object 51 | * 描述：文本的图形样式。其他样式请参考[绘图属性](./graphic) 52 | ```js 53 | 64 | ``` 65 | 66 | 样式值支持回调： 67 | ```js 68 | { 71 | const style = {textAlign: 'center'}; 72 | if(if(sales > 1000)) { 73 | style.fill = '#ff0000'; 74 | } else { 75 | style.fill = '#00ff00'; 76 | } 77 | return style; 78 | }} 79 | /> 80 | ``` 81 | 82 | #### `autoRotate` 83 | * 类型：Boolean 84 | * 描述：是否需要自动旋转，默认值：`true`。 85 | 86 | #### `formatter` 87 | * 类型：Function 88 | * 描述：用于格式化坐标轴上显示的文本信息。 89 | ```js 90 | { 93 | // text 为每条记录 x 属性的值 94 | // item 为映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息 95 | // index 为每条记录的索引 96 | var point = item.point; // 每个弧度对应的点 97 | var percent = point['percent']; 98 | percent = (percent * 100).toFixed(2) + '%'; 99 | return name + ' ' + percent; 100 | }} 101 | /> 102 | ``` 103 | 104 | #### `htmlTemplate` 105 | * 类型：Function 106 | * 描述：自定义 html 文本 107 | ```js 108 | { 111 | // text 为每条记录 x 属性的值 112 | // item 为映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息 113 | // index 为每条记录的索引 114 | var point = item.point; // 每个弧度对应的点 115 | var percent = point['percent']; 116 | percent = (percent * 100).toFixed(2) + '%'; 117 | // 自定义 html 模板 118 | return '' + text + '
' + percent + ''; 119 | } 120 | /> 121 | ``` 122 | -------------------------------------------------------------------------------- /bizGoblin/zh/api/tooltip.md: -------------------------------------------------------------------------------- 1 | 2 | # Tooltip 3 | 4 | 提示信息(tooltip)组件，是指当鼠标悬停在图表上的某点时，以提示框的形式展示该点的数据，比如该点的值，数据单位等。 5 | 6 | ## 使用说明 7 | 8 | ### 父组件 9 | - [``](./chart.md) 10 | 11 | ### 子组件 12 | - none 13 | 14 | **BizGoblin 当且仅当``存在时图表才展示tooltip**，如下所示： 15 | 16 | ```js 17 | 18 | // 开启图表tooltip功能 19 | 20 | 21 | ``` 22 | 23 | ## API 24 | 25 | #### `offsetX` 26 | * 类型：Number 27 | * 描述：x 方向的偏移量。 28 | 29 | #### `offsetY` 30 | * 类型：Number 31 | * 描述：y 方向的偏移量。 32 | 33 | #### `triggerOn` 34 | * 类型：Array 35 | * 描述：tooltip 出现的触发行为，可自定义，默认 `[ 'touchstart', 'touchmove' ]` 36 | 37 | #### `triggerOff` 38 | * 类型：String 39 | * 描述：tooltip 消失的触发行为，可自定义，默认 `touchend` 40 | 41 | #### `showTitle` 42 | * 类型：Boolean 43 | * 描述：是否展示提示信息的标题，默认为 `false` 。 44 | 45 | #### `showCrosshairs` 46 | * 类型：Boolean 47 | * 描述：是否显示辅助线，点图、路径图、线图、面积图默认展示 48 | 49 | #### `crosshairsStyle` 50 | * 类型：Object 51 | * 描述：配置辅助线的样式 52 | 53 | ```js 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | #### `showTooltipMarker` 61 | * 类型：Boolean 62 | * 描述：是否显示 tooltipMarker 63 | 64 | #### `background` 65 | * 类型：Object 66 | * 描述：设置tooltip 内容框的背景样式 67 | 68 | ```js 69 | { 70 | radius: 2, 71 | fill: '#1890FF', 72 | padding: [ 6, 10 ] 73 | } 74 | ``` 75 | 76 | #### `titleStyle` 77 | * 类型：Object 78 | * 描述：设置tooltip 标题的文本样式配置，showTitle 为 false 时不生效 79 | 80 | ```js 81 | { 82 | fontSize: 24, 83 | fill: '#fff', 84 | textAlign: 'start', 85 | textBaseline: 'top' 86 | } 87 | ``` 88 | 89 | #### `nameStyle` 90 | * 类型：Object 91 | * 描述：设置tooltip name 项的文本样式配置 92 | 93 | ```js 94 | { 95 | fontSize: 24, 96 | fill: '#fff', 97 | textAlign: 'start', 98 | textBaseline: 'middle' 99 | } 100 | ``` 101 | 102 | #### `valueStyle` 103 | * 类型：Object 104 | * 描述：设置tooltip value 项的文本样式配置 105 | 106 | ```js 107 | { 108 | fontSize: 24, 109 | fill: '#fff', 110 | textAlign: 'start', 111 | textBaseline: 'middle' 112 | } 113 | ``` 114 | 115 | #### `showItemMarker` 116 | * 类型：Boolean 117 | * 描述：是否展示每条记录项前面的 marker 118 | 119 | #### `itemMarkerStyle` 120 | * 类型：Object 121 | * 描述：每条记录项前面的 marker 的样式配置 122 | 123 | ```js 124 | { 125 | radius: 7, 126 | symbol: 'circle', 127 | lineWidth: 2, 128 | stroke: '#fff' 129 | } 130 | ``` 131 | 132 | #### `custom` 133 | * 类型：Boolean 134 | * 描述：是否自定义 tooltip 提示框 135 | 136 | ### Function 137 | 138 | #### `onShow` 139 | * 类型：Function 140 | * 描述：tooltip 显示时的回调函数 141 | 142 | ```js 143 | function (obj, chart) { 144 | // obj: { x, y, title, items } 145 | // chart: 图表Chart示例对象 146 | } 147 | ``` 148 | 149 | #### `onHide` 150 | * 类型：Function 151 | * 描述：tooltip 隐藏时的回调函数 152 | 153 | ```js 154 | function (obj, chart) { 155 | // obj: { x, y, title, items } 156 | // chart: 图表Chart示例对象 157 | } 158 | ``` 159 | 160 | #### `onChange` 161 | * 类型：Function 162 | * 描述：tooltip 内容发生改变时的回调函数 163 | 164 | ```js 165 | function (obj, chart) { 166 | // obj: { x, y, title, items } 167 | // chart: 图表Chart示例对象 168 | } 169 | ``` 170 | -------------------------------------------------------------------------------- /bizCharts/zh/api/graphic.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | # canvas 属性 7 | 8 | 由于 G2 使用的是 canvas，绘制的所有图形都支持 canvas 的属性，本章列出常用的属性，详细信息参考[ canvas 属性](http://www.w3school.com.cn/tags/html_ref_canvas.asp)。 9 | 10 | ## 通用属性 11 | 12 | * `fill` 设置用于填充绘画的颜色、渐变或模式； 13 | * `stroke` 设置用于笔触的颜色、渐变或模式； 14 | * `shadowColor` 设置用于阴影的颜色； 15 | * `shadowBlur` 设置用于阴影的模糊级别； 16 | * `shadowOffsetX` 设置阴影距形状的水平距离； 17 | * `shadowOffsetY` 设置阴影距形状的垂直距离； 18 | * `opacity` 设置绘图的当前 alpha 或透明值； 19 | * `globalCompositeOperation` 设置新图像如何绘制到已有的图像上。 20 | 21 | > **！注意：** 22 | 23 | G2 对图形属性进行了缩写 24 | 25 | * fillStyle 缩写为 `fill`； 26 | * stokeStyle 缩写为 `stroke`； 27 | * globalAlpha 缩写为 `opacity`。 28 | 29 | ## 线条样式 30 | 31 | * [`lineCap`](http://www.w3school.com.cn/tags/canvas_linecap.asp) 设置线条的结束端点样式； 32 | * [`lineJoin`](http://www.w3school.com.cn/tags/canvas_linejoin.asp) 设置两条线相交时，所创建的拐角形状； 33 | * [`lineWidth`](http://www.w3school.com.cn/tags/canvas_linewidth.asp) 设置当前的线条宽度； 34 | * [`miterLimit`](http://www.w3school.com.cn/tags/canvas_miterlimit.asp) 设置最大斜接长度。 35 | 36 | > **！注意：** 37 | 38 | 1. G2 在现有线的样式基础上增加了虚线的支持： 39 | 40 | * `lineDash`：设置线的虚线样式，可以指定一个数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。 41 | 42 | 这个属性取决于浏览器是否支持 setLineDash 函数，详情参考[setLineDash](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)。 43 | 44 | 2. G2 在现有线的基础上增加了首尾箭头的绘制支持： 45 | 46 | - `startArrow`: true|boolean，是否渲染起点箭头 47 | - `endArrow`: true|boolean，是否渲染终点箭头 48 | - `arrowAngle`: number，角度，箭头的夹角大小 49 | - `arrowRadius`: number，箭头长度 50 | 51 | ## 文本属性 52 | 53 | * [`font`](http://www.w3school.com.cn/tags/canvas_font.asp) 设置文本内容的当前字体属性； 54 | * [`textAlign`](http://www.w3school.com.cn/tags/canvas_textalign.asp) 设置文本内容的当前对齐方式, 支持的属性：center|end|left|right|start； 55 | * [`textBaseline`](http://www.w3school.com.cn/tags/canvas_textbaseline.asp) 设置在绘制文本时使用的当前文本基线, 支持的属性:top|middle|bottom。 56 | 57 | **！注意：** 58 | 59 | G2 提供了额外的几个文本属性，便于用户设置字体，具体的含义参考[font 组成](http://www.w3school.com.cn/tags/canvas_font.asp) 60 | 61 | * `fontStyle` 对应 font-style； 62 | * `fontVariant` 对应 font-variant； 63 | * `fontWeight` 对应 font-weight； 64 | * `fontSize` 对应 font-size； 65 | * `fontFamily` 对应 font-family； 66 | 67 | ## 渐变色 68 | 69 | G2 中提供了线性渐变、放射状/环形渐变两种形式，使用方式如下： 70 | 71 | * 线性渐变 72 | 73 |

74 | 75 | 76 | > 说明：`l` 表示使用线性渐变，绿色的字体为可变量，由用户自己填写。 77 | 78 | ```js 79 | // example 80 | // 使用渐变色描边，渐变角度为 0，渐变的起始点颜色 #ffffff，中点的渐变色为 #7ec2f3，结束的渐变色为 #1890ff 81 | stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff' 82 | ``` 83 | 84 | * 放射状/环形渐变 85 | 86 |

87 | 88 | > 说明：`r` 表示使用放射状渐变，绿色的字体为可变量，由用户自己填写，开始圆的 x y r 值均为相对值，0 至 1 范围。 89 | 90 | ```js 91 | // example 92 | // 使用渐变色填充，渐变起始圆的圆心坐标为被填充物体的包围盒中心点，半径为(包围盒对角线长度 / 2) 的 0.1 倍，渐变的起始点颜色 #ffffff，中点的渐变色为 #7ec2f3，结束的渐变色为 #1890ff 93 | fill: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff' 94 | ``` 95 | 96 | ## 纹理 97 | 98 |

99 | 100 | > 说明：`p` 表示使用纹理，绿色的字体为可变量，由用户自己填写。 101 | 102 | * `a`: 该模式在水平和垂直方向重复； 103 | * `x`: 该模式只在水平方向重复； 104 | * `y`: 该模式只在垂直方向重复； 105 | * `n`: 该模式只显示一次（不重复）。 106 | 107 | 纹理的内容可以直接是图片或者 [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)。 108 | 109 | ```js 110 | // example 111 | // 使用纹理填充，在水平和垂直方向重复图片 112 | fill: 'p(a)https://gw.alipayobjects.com/zos/rmsportal/ibtwzHXSxomqbZCPMLqS.png' 113 | ``` 114 | 115 | -------------------------------------------------------------------------------- /bizCharts/zh/api/facet.md: -------------------------------------------------------------------------------- 1 | 2 | # Facet 3 | 4 | 分面组件，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中，所有子图采用相同的图表类型，并进行了一定的设计，使得它们之间方便进行比较。 5 | 6 | 总结起来，分面其实提供了两个功能： 7 | - 按照指定的维度划分数据集； 8 | - 对图表进行排版。 9 | 10 | 11 | 对于探索型数据分析来说，分面是一个强大有力的工具，能帮你迅速地分析对比出数据各个子集模式的异同。 12 | 13 | ![e68863a6-f139-444f-a800-75613046dcc4.png](https://gw.alipayobjects.com/zos/rmsportal/HlUJdjfYCEeeOKsBREnp.png) 14 | 15 | 16 | ## 使用说明 17 | ### 父组件 18 | [``](chart) 19 | 20 | ### 子组件 21 | [``](view) 22 | 23 | ```js 24 | 25 | 26 | 27 | 28 | 29 | ``` 30 | 31 | ## API 32 | 33 | > 以下是 `` 组件的通用属性，不同的类型可配置的属性有略微差别，具体见各个类型的分面说明。 34 | 35 | #### `type` 36 | * 类型：String 37 | * 描述：分面类型，'rect' | 'list' | 'circle' | 'tree' | 'mirror'。 38 | 39 | |类型 |说明| 链接| 40 | | :-- | :-- | :--| 41 | |rect |默认类型，指定 2 个维度作为行列，形成图表的矩阵。| [参见rect](#rect) | 42 | |list |指定一个维度，可以指定一行有几列，超出自动换行。| [参见list](#list) | 43 | |circle |指定一个维度，沿着圆分布。| [参见circle](#circle) | 44 | |tree |指定多个维度，每个维度作为树的一级，展开多层图表。| [参见tree](#tree) | 45 | |mirror |指定一个维度，形成镜像图表。| [参见mirror](#mirror) | 46 | |matrix |指定 2 个维度，形成矩阵分面图表。| [参见matrix](#matrix) | 47 | 48 | #### `fields` 49 | * 类型：String | Array 50 | * 描述：设定数据划分的维度，是数据的字段名，包含多个维度时使用数组传入。不同 `type` 的分面可传入字段个数不同，详见[分面类型说明](#facetType)。 51 | 52 | #### `padding` 53 | * 类型：Number 54 | * 描述：设置每个 view 之间的间距。`padding` 是view 的内部边距，所以不会影响布局。 55 | 56 | #### `showTitle` 57 | * 类型：Boolean 58 | * 描述：是否显示分面的标题，默认为 `true`，即展示。 59 | 60 | #### `autoSetAxis` 61 | * 类型：Boolean 62 | * 描述：是否自动设置坐标轴的文本，避免重复和遮挡，默认为 `true`，即自动设置。 63 | 64 | #### `colTitle` 65 | * 类型：Object | null 66 | * 描述：分面列标题设置，可设置属性如下，如果属性值为 `null`，表示不展示列标题。 67 | 68 | ```js 69 | 78 | ``` 79 | 80 | #### `rowTitle` 81 | * 类型：Object | null 82 | * 描述：分面行标题设置，可设置属性如下，如果属性值为 `null`，表示不展示列标题 83 | 84 | ```js 85 | 94 | ``` 95 | 96 | #### `eachView` 97 | * 类型：Function 98 | * 描述：facet 中每个 view 的配置。该属性比较特殊，可以直接等于一个函数，或者作为一个返回 View 的匿名函数嵌套在 ` Function ` 组件中使用。 99 | 代码如下，也可参见[使用说明](#shuoming)。 100 | 101 | ```js 102 | { 103 | view.point().position('carat*price'); 104 | }}／> 105 | ``` 106 | 107 | !注意：`showTitle` 和 `autoSetAxis` 用于控制分面的默认行为；`colTitle` 和 `rowTitle` 是通过 `chart.guild().text()` 来实现的，所以所有 `chart.guild().text()` 的参数都生效。 108 | 109 | 110 | 111 | ## 分面类型 112 | 113 | 114 | ### rect 矩形分面 115 | 116 | rect 矩形分面是 BizCharts 的默认分面类型。支持按照一个或者两个维度的数据划分，按照先列后行的顺序。 117 | 118 | ```js 119 | 120 | //该匿名函数会转为 `eachView:function` 属性 121 | {(view, facet)=>{ 122 | view.point().position('carat*price').color('cut'); 123 | }} 124 | 125 | ``` 126 | 分面矩阵每列按照 `cut` 字段划分，每行按照 `clarity` 字段划分。 127 | 128 | 129 | ### list 水平列表分面 130 | 131 | 该类型分面可以通过设置 `scale` 属性来指定每行可显示分面的个数，超出时会自动换行。 132 | 133 | 134 | ### circle 圆形分面 135 | 136 | 137 | ### tree 树形分面 138 | 提供了 `line` 和 `lineSmooth` 两个属性，用于配置连接各个分面的线的样式，其中： 139 | 140 | - line，用于配置线的显示属性。 141 | - lineSmooth，各个树节点的连接线是否是平滑的曲线，默认为 false。 142 | 143 | 下图展示了树形多层级的分面。 144 | 145 | 146 | ### mirror 镜像分面 147 | 通过配置 `transpose` 属性为 true，可以将镜像分面翻转。 148 | 149 | 150 | ### matrix 矩阵分面 151 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/animate.md: -------------------------------------------------------------------------------- 1 | # 如何自定义动画 2 | BizCharts 保留和兼容了 G2 中所有的动画功能。 3 | 4 | ## 动画场景分类 5 | 6 | 总共分为四种类型： 7 | 8 | * appear: 初始化时的入场动画； 9 | * enter: 更新时的出现动画； 10 | * update: 更新时的变化动画； 11 | * leave: 更新时的动画； 12 | 13 | ## 动画配置参数 14 | 15 | * [animation:String] 动画名称,不同类型的动画场景所支持的动画不同，详情[内置动画](#animationType) 16 | * [easing:String | Function] 动画缓动效果 17 | * [delay:Number | Function] 动画延迟执行事件 18 | * [duration:Number | Function] 动画持续事件 19 | 20 | 使用如下： 21 | ```js 22 | { 23 | animation: 'fadeIn', // 动画名称 24 | easing: 'easeInQuart', // 动画缓动效果 25 | delay: 100, // 动画延迟执行时间 26 | duration: 600 // 动画执行时间 27 | } 28 | ``` 29 | 30 | ## 如何使用动画 31 | 可以通过 ** 上的 *animate 属性*, 详见 [Geom animate属性](../api/geom#animate) 32 | 33 | 34 | 35 | ## 支持的动画名称 36 | ### enter 37 | - clipIn, 38 | - zoomIn, 39 | - pathIn, 40 | - scaleInY, 41 | - scaleInX, 42 | - fanIn, 43 | - fadeIn 44 | 45 | ### leave 46 | - lineWidthOut, 47 | - zoomOut, 48 | - pathOut, 49 | - fadeOut 50 | 51 | ### appear 52 | - clipIn, 53 | - zoomIn, 54 | - pathIn, 55 | - scaleInY, 56 | - scaleInX, 57 | - fanIn, 58 | - fadeIn 59 | 60 | ### update 61 | - fadeIn 62 | - fanIn 63 | 64 | 65 | 66 | ## 自定义动画 67 | ```js 68 | const Animate = BizCharts.Animate; 69 | /** 70 | * @param {String} animationType 动画场景类型 appear enter leave update 71 | * @param {String} 动画名称，用户自定义即可 72 | * @param {Function} 动画执行函数 73 | **/ 74 | Animate.registerAnimation(animationType, animationName, animationFun); 75 | ``` 76 | 77 | 图形 Shape 的动画接口说明：`shape.animate(props, duration, delay, easing, callback)` 78 | 79 | ```js 80 | /** 81 | * 执行动画 82 | * @param {Object} toProps 动画最终状态 83 | * @param {Number} duration 动画执行时间 84 | * @param {Number} delay 动画延迟时间 85 | * @param {String} easing 动画缓动效果 86 | * @param {Function} callback 动画执行后的回调 87 | */ 88 | shape.animate(toProps, duration, delay = 0, easing, callback) 89 | ``` 90 | 91 | ### 示例 92 | ```js 93 | const Animate = BizCharts.Animate; 94 | Animate.registerAnimation('appear', 'delayScaleInY', function(shape, animateCfg) { 95 | const box = shape.getBBox(); // 获取柱子包围盒 96 | const origin = shape.get('origin'); // 获取柱子原始数据 97 | const points = origin.points; // 获取柱子顶点 98 | // 计算柱子的变换中点 99 | const centerX = (box.minX + box.maxX) / 2; 100 | let centerY; 101 | if (points[0].y - points[1].y <= 0) { // 当顶点在零点之下 102 | centerY = box.maxY; 103 | } else { 104 | centerY = box.minY; 105 | } 106 | // 设置初始态 107 | shape.attr('transform', [ 108 | ['t', -centerX, -centerY], 109 | ['s', 1, 0.1], 110 | ['t', centerX, centerY] 111 | ]); 112 | const index = shape.get('index'); 113 | let delay = animateCfg.delay; 114 | if (BizCharts.Util.isFunction(delay)) { 115 | delay = animateCfg.delay(index); 116 | } 117 | let easing = animateCfg.easing; 118 | if (BizCharts.Util.isFunction(easing)) { 119 | easing = animateCfg.easing(index); 120 | } 121 | // 设置动画目标态 122 | shape.animate({ 123 | transform: [ 124 | ['t', -centerX, -centerY], 125 | ['s', 1, 10], 126 | ['t', centerX, centerY] 127 | ] 128 | }, animateCfg.duration, easing, animateCfg.callback, delay); 129 | }); 130 | 131 | const data = []; 132 | for (let i = 0; i < 50; i++) { 133 | data.push({ 134 | x: i, 135 | y: (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5 136 | }); 137 | } 138 | 139 | ReactDom.render(( 140 | 141 | { 146 | return index * 10; 147 | } 148 | } 149 | }}/> 150 | 151 | ), container); 152 | ``` 153 | -------------------------------------------------------------------------------- /bizGoblin/zh/api/axis.md: -------------------------------------------------------------------------------- 1 | 2 | # Axis 3 | 4 | 坐标轴配置，将Axis抽离为一个单独的组件，不适用Axis组件则默认不显示所有坐标轴及相关的信息。 5 | 6 | ## 使用说明 7 | ### 父组件 8 | - [``](./chart.md) 9 | 10 | ### 子组件 11 | - none 12 | 13 | ### 注意事项 14 | 15 | ```js 16 | // 不显示坐标轴 17 | 18 | 19 | 20 | ``` 21 | 22 | * 使用Axis组件时，必须指定当前坐标轴对应数据源中的字段名（字段名为name），否则该坐标轴相关配置信息将不起作用； 23 | 24 | 25 | ```js 26 | // 指定坐标轴对应数据源中的字段名 27 | 28 | 29 | 30 | 31 | ``` 32 | 33 | * 一旦使用``组件，那么所有的坐标轴都会显示，如若需要隐藏某一个坐标轴及相关信息，务必将show参数并置为false，如下所示： 34 | 35 | ```js 36 | // 只显示其中一条坐标轴 37 | 38 | 39 | 40 | 41 | 42 | ``` 43 | 44 | ## API 45 | 46 | #### `dataKey` 47 | * 类型：String 48 | * 描述：当前坐标轴对应数据源中的字段名(必填) 49 | ```js 50 | 51 | ``` 52 | 53 | #### `show` 54 | * 类型：boolean 55 | * 描述：当前坐标轴是否需要可见，默认值true。 56 | ```js 57 | 58 | ``` 59 | 60 | #### `position` 61 | * 类型：String 62 | * 描述：当前坐标轴的摆放位置，可设置的值为`top`、`bottom`、`left`、`right`。`x` 轴默认位于底部 `bottom`， `y` 轴可设置 `position` 为 `left` 、 `right`。 63 | 64 | #### `line` 65 | * 类型：Object | null 66 | * 描述：设置坐标轴线的样式，包括线的颜色、粗细等。如果该属性值为 null 则表示不展示坐标轴线。样式设置细节参考[绘图属性](https://antv.alipay.com/zh-cn/f2/3.x/api/canvas.html) 67 | 68 | #### `labelOffset` 69 | * 类型：Number 70 | * 描述：坐标轴文本距离轴线的距离 71 | 72 | #### `grid` 73 | * 类型：Object | Function | null 74 | * 描述：设置坐标轴网格线的样式，网格线与坐标轴线垂直。如果该属性值为 null 则表示不展示。细节参考[绘图属性](https://antv.alipay.com/zh-cn/f2/3.x/api/canvas.html) 75 | 76 | ```js 77 | //可配置样式 78 | const grid = { 79 | align: 'center', // 网格顶点从两个刻度中间开始 80 | type: 'line' || 'arc', // 网格的类型 81 | lineStyle: { 82 | stroke: '#d9d9d9', // 网格线的颜色 83 | lineWidth: 1, // 网格线的宽度复制代码 84 | lineDash: [4, 4] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素 85 | }, // 网格线的样式配置，原有属性为 line 86 | alternateColor: '#ccc' || ['#f80', '#ccc'], // 为网格设置交替的背景色，指定一个值则先渲染奇数层，两个值则交替渲染。**代替原有的 odd 和 even 属性** 87 | } 88 | ``` 89 | 90 | 91 | #### `tickLine` 92 | * 类型：Object | Function | null 93 | * 描述：设置坐标轴的刻度线。如果该属性值为 null 则表示不展示。 94 | 95 | ```js 96 | //可配置样式 97 | const tickLine = { 98 | lineWidth: 1, // 刻度线宽 99 | stroke: '#ccc', // 刻度线的颜色 100 | length: 5, // 刻度线的长度, **原来的属性为 line**,可以通过将值设置为负数来改变其在轴上的方向 101 | } 102 | ``` 103 | 104 | #### `label` 105 | * 类型：Object | Function | null 106 | * 描述：坐标轴文本配置，设置 null，不展示坐标轴文本。 107 | 108 | ```js 109 | const label = { 110 | offset: {number}, // 数值，设置坐标轴文本 label 距离坐标轴线的距离 111 | // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值 112 | textStyle: { 113 | textAlign: 'center', // 文本对齐方向，可取值为： start center end 114 | fill: '#404040', // 文本的颜色 115 | fontSize: '12', // 文本大小 116 | fontWeight: 'bold', // 文本粗细 117 | rotate: 30, 118 | textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle 119 | } | (text) => { 120 | // text: 坐标轴对应字段的数值 121 | }, 122 | autoRotate: {boolean}, // 文本是否需要自动旋转，默认为 true 123 | /** 124 | * 用于格式化坐标轴上显示的文本信息的回调函数 125 | * @param {string} text 文本值 126 | * @param {object} item 该文本值对应的原始数据记录 127 | * @param {number} index 索引值 128 | * @return {string} 返回格式化后的文本值 129 | */ 130 | formatter(text, item, index) {}, 131 | /** 132 | * 使用 html 渲染文本 133 | * @param {string} text 文本值 134 | * @param {object} item 该文本值对应的原始数据记录 135 | * @param {number} index 索引值 136 | * @return {string} 返回 html 字符串 137 | */ 138 | htmlTemplate(text, item, index) {} 139 | } 140 | ``` 141 | 142 | #### `top` 143 | * 类型：boolean 144 | * 描述：调整图层层级，true 表示展示在最上层图形，false 表示展示在最下层图形。 145 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/chart.md: -------------------------------------------------------------------------------- 1 | # 图表构成 2 | 3 | ## 组件构成 4 | 在 BizCharts 中，图表是由各个组件组合而成的。组件有两种类型，实体组件和抽象组件。 5 | - 实体组件：在图表上有对应的图形、文本显示。 6 | - 抽象组件：没有显示，是一种概念抽象组件。 7 | 8 | 常用图表组件： 9 | 10 | | 名称 | 组件类型 | 说明 | 11 | | :-------------------------------------------------------- | :------: | :------------------------------------------------------------------------------------------- | 12 | | [``](../api/chart) | 实体组件 | 图表父组件，所有的其他组件都必须由 `` 包裹。 | 13 | | [``](../api/coord) | 抽象组件 | 坐标系组件。``, 用来描述 ` ` 组件的坐标系，比如笛卡尔坐标系、极坐标系等。 | 14 | | [``](../api/axis) | 实体组件 | 坐标轴组件, ``。 | 15 | | [``](../api/geom) | 实体组件 | 几何标记组件, ``。即我们所说的点、线、面这些几何图形。 | 16 | | [``](../api/label) | 实体组件 | 几何标记的辅助文本组件, ``。该组件必须作为`` 的子组件。 | 17 | | [``](../api/tooltip) | 实体组件 | 提示框组件, ``。 | 18 | 19 | 20 | 非常用图表组件： 21 | 22 | | 名称 | 组件类型 | 说明 | 23 | | :-------------------------------------------------------- | :------: | :------------------------------------------------------------------------------------------- | 24 | | [``](../api/guide) | 实体组件 | 辅助标记组件, ``。 | 25 | | [``](../api/guide#line) | 实体组件 | 辅助标记线组件, ``。该组件处于 Guide 组件命名空间下，且必须作为 `` 的子组件才会生效。 | 26 | | [``](../api/guide#image) | 实体组件 | 辅助标记图片组件, ``。该组件处于 Guide 组件命名空间下。且必须作为 `` 的子组件才会生效 | 27 | | [``](../api/guide#text) | 实体组件 | 辅助标记文本组件, ``。该组件处于 Guide 组件命名空间下。且必须作为 `` 的子组件才会生效 | 28 | | [``](../api/guide#region) | 实体组件 | 辅助标记举行组件, ``。该组件处于 Guide 组件命名空间下。且必须作为 `` 的子组件才会生效 | 29 | | [``](../api/guide#arc) | 实体组件 | 辅助标记弧形组件, ``。该组件处于 Guide 组件命名空间下。且必须作为 `` 的子组件才会生效 | 30 | | [``](../api/guide#html) | 实体组件 | 辅助标记 html 组件, ``。该组件处于 Guide 组件命名空间下。且必须作为 `` 的子组件才会生效 | 31 | | [``](#RegionFilter) | 实体组件 |辅助框组件，``，框选一段图区，设置背景、边框等。| 32 | | [``](#DataMarker) | 实体组件 | 辅助 html，``，指定位置添加自定义 html，显示自定义信息。| 33 | | [``](#DataRegion) | 实体组件 |辅助弧线，``。| 34 | | [``](../api/facet) | 抽象组件 | 分面组件，``。 | 35 | | [``](../api/view) | 抽象组件 | 视图组件，``。 | 36 | 37 | 图表插件有: 38 | 39 | | 名称 | 类型 | 说明 | 40 | | :---------------------------------- | :------- | :---------------------------------- | 41 | | [``](../api/sliderPlugin) | 图标插件 | 使用前必须确定已经安装了 Bizcarts。 | 42 | 43 | ## 空间构成 44 | 下图所示为常用图表的各组件的空间构成。 45 | 46 | ![7df8bc11-09dc-4d8d-9832-54364f594501.png](https://img.alicdn.com/tfs/TB105z4efDH8KJjy1XcXXcpdXXa-2030-1480.png) 47 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/dataflow.md: -------------------------------------------------------------------------------- 1 | 2 | # G2 的数据处理流程 3 | *文档转自G2* 4 | 5 | 下面我们以最简单的月份、天气、城市的数据为例说明 G2 的数据处理流程，阐述数据是如何映射至图形空间。 6 | 7 | 我们需要在 `400 px * 200 px` 像素区域绘制如下点图（该图只是用于数据流说明，并不具有可视化意义）： 8 | 9 |

10 | 11 | 原始数据如下： 12 | 13 | ```js 14 | var data = [ 15 | {"month":"一月","temperature":5,"city":"北京"}, 16 | {"month":"二月","temperature":10,"city":"北京"}, 17 | {"month":"一月","temperature":8,"city":"南京"}, 18 | {"month":"二月","temperature":14,"city":"南京"}, 19 | ]; 20 | ``` 21 | 22 | 绘图代码： 23 | 24 | ```js 25 | var chart = new G2.Chart({ 26 | id: 'mountNode', 27 | width: 400, 28 | height: 200 29 | }); 30 | chart.source(data); 31 | chart.point().position('month*temperature').color('city'); 32 | chart.render(); 33 | ``` 34 | 35 | `chart.point().position('month*temperature').color('city');` 含义如下： 36 | 37 | 1. 将 `month` 映射到 `position` 位置图形属性的 x 轴方向； 38 | 2. 将 `temperature` 映射到 `position` 位置图形属性的 y 轴方向； 39 | 3. 将 `city` 映射到 `color` 颜色图形属性。 40 | 41 | ## 加载数据 42 | 43 | 加载数据后，对数据进行处理，处理后结构如表所示： 44 | 45 | month|temperature|city 46 | -----|----|---- 47 | 一月|5|北京 48 | 二月|10|北京 49 | 一月|8|南京 50 | 二月|14|南京 51 | 52 | ## 对数据进行分组 53 | 54 | 默认我们会根据映射至 `size` `shape` `color` 这三个图形属性的数据属性对数据进行分组。 55 | 56 | 这里我们根据 `city` 字段对数据进行分组，如下表所示： 57 | 58 | month|temperature|city 59 | -----|----|---- 60 | 一月|5|北京 61 | 二月|10|北京 62 | 63 | month|temperature|city 64 | -----|----|---- 65 | 一月|8|南京 66 | 二月|14|南京 67 | 68 | ## 保存原始数据 69 | 70 | 此时将原始数据保存下来，方便后期 tooltip 取对应的数据进行展示。 71 | 72 | 所有的原始数据存储于 `_origin` 属性中。 73 | 74 | month|temperature|city| _origin 75 | -----|----|----|----- 76 | 一月|5|北京| {"month":"一月","temperature":5,"city":"北京"} 77 | 二月|10|北京| {"month":"二月","temperature":10,"city":"北京"} 78 | 79 | month|temperature|city| _origin 80 | -----|----|----|----- 81 | 一月|8|南京| {"month":"一月","temperature":8,"city":"南京"} 82 | 二月|14|南京| {"month":"二月","temperature":14,"city":"南京"} 83 | 84 | ## 数据数值化 85 | 86 | 这里 `month` `city` 为分类的类型，我们将其转换为数值（索引值）。 87 | 88 | month|temperature|city|_origin 89 | -----|----|----|----- 90 | 0|5|0|{month: '一月',temperature: 5,city: '北京'} 91 | 1|10|0|{"month":"二月","temperature":10,"city":"北京"} 92 | 93 | month|temperature|city|_origin 94 | -----|----|----|----- 95 | 0|8|1| {"month":"一月","temperature":8,"city":"南京"} 96 | 1|14|1| {"month":"二月","temperature":14,"city":"南京"} 97 | 98 | ## 调整数据 adjust 99 | 100 | 此处无调整。 101 | 102 | ## 归一化操作 103 | 104 | * 由于月份 `month` 是分类类型，又决定 x 轴的位置，需要在坐标轴两端留下空白，所以需要将数据归一化的分布范围从 [0, 1] 调整至 [0.25, 0.75]； 105 | * `city` 是分类类型，但是不参与位置运算，所以分布范围仍为 [0, 1]； 106 | * `temperature` 是数字类型，原始数值范围为 [5, 14]，但是为了让 y 坐标轴的刻度线均匀分布易于用户阅读理解，G2 会默认对数值进行优化，将数值范围调整为 [0, 20] 使得刻度线均匀分布（默认每条坐标轴绘制 5 个刻度线），即 [0, 5, 10, 15, 20]; 107 | 108 | 归一化后的结果： 109 | 110 | month|temperature|city|_origin 111 | -----|----|----|----- 112 | 0.25|0.25|0|{month: '一月',temperature: 5,city: '北京'} 113 | 0.75|0.5|0|{"month":"二月","temperature":10,"city":"北京"} 114 | 115 | month|temperature|city|_origin 116 | -----|----|----|----- 117 | 0.25|0.4|1|{"month":"一月","temperature":8,"city":"南京"} 118 | 0.75|0.7|1|{"month":"二月","temperature":14,"city":"南京"} 119 | 120 | ## 计算绘制图形需要的点 121 | 122 | 对于点图，我们只需要获取 x 和 y 轴的坐标点即可。所以数据处理结果如下： 123 | 124 | month|temperature|city|_origin 125 | -----|----|----|----- 126 | [0.25]|[0.25]|0|{month: '一月',temperature: 5,city: '北京'} 127 | [0.75]|[0.5]|0|{"month":"二月","temperature":10,"city":"北京"} 128 | 129 | month|temperature|city|_origin 130 | -----|----|----|----- 131 | [0.25]|[0.4]|1|{"month":"一月","temperature":8,"city":"南京"} 132 | [0.75]|[0.7]|1|{"month":"二月","temperature":14,"city":"南京"} 133 | 134 | ## 映射至图形属性 135 | 136 | 由于画布坐标的起始点为左上角，所有 0.1 转换成画布坐标的结果为 200 - 200 * 0.1 137 | 138 | x|y|color|_origin 139 | -----|----|----|----- 140 | [100]|[150]|'red'|{month: '一月',temperature: 5,city: '北京'} 141 | [300]|[100]|'red'|{"month":"二月","temperature":10,"city":"北京"} 142 | 143 | x|y|color|_origin 144 | -----|----|----|----- 145 | [100]|[120]|'blue'|{"month":"一月","temperature":8,"city":"南京"} 146 | [300]|[60]|'blue'|{"month":"二月","temperature":14,"city":"南京"} 147 | 148 | ## 渲染绘制 149 | 150 | 将最后处理的数据交由绘图库进行绘制渲染。 151 | -------------------------------------------------------------------------------- /bizCharts/zh/api/bizcharts.md: -------------------------------------------------------------------------------- 1 | 2 | # BizCharts 3 | 4 | > 如果是 umd 文件引入， BizCharts = Window.BizCharts; 5 | > 如果是 package 引入， BizCharts 为: import * as BizCharts from "bizcharts"; 6 | 7 | 全局命名空间 BizCharts 包含： 8 | 9 | ## 组件 10 | 11 | #### Chart 12 | 图表最顶级的组件，控制着图表的创建、绘制、销毁等。 13 | 详细文档见 [Chart api](chart) 14 | 15 | #### Coord 16 | 坐标系组件，设置 Chart 或者 View 的坐标系类型。 17 | 详细文档见 [Coord api](coord) 18 | 19 | #### Axis 20 | 坐标轴组件，控制图表中坐标轴的样式等。 21 | 详细文档见 [Axis api](axis) 22 | 23 | #### Geom 24 | 几何标记对象，决定创建图表的类型。 25 | 详细文档见 [Geom api](geom)。 26 | 27 | #### Label 28 | 几何标记对象上的文本。 29 | 详细文档见 [Label api](label) 30 | 31 | #### Legend 32 | 图例。 33 | 详细文档见 [Legend api](legend) 34 | 35 | #### Guide 36 | 坐标轴组件，控制图表中坐标轴的样式等。 37 | 详细文档见 [Guide api](guide) 38 | 39 | #### Facet 40 | 控制 Chart 分面。 41 | 详细文档见 [Facet api](facet) 42 | 43 | #### View 44 | 视图组件。 45 | 详细文档见 [View api](view) 46 | 47 | ## G2 48 | G2 的命名空间，在有需要的情况下用户可以直接拿到该对象去工作。 49 | 50 | ## Animate 51 | 用来注册用户自定义动画。 52 | 详细文档见 [动画教程](../docs/animate)。 53 | 54 | ## Shape 55 | 构成图表具体的形状类。 56 | 详细文档见 [Shape api](shape)。 57 | 58 | ## setTheme 59 | 设置 BizCharts 中使用的主题类型。 60 | 详细文档见 [theme tutorial](../docs/theme)。 61 | 62 | ## track 63 | 该方法用于 G2 情况的打点监控，默认处于开启状态，如果您不想让我们知道您的版本使用情况，请配置为 false。 64 | ```js 65 | BizCharts.track(false); 66 | ``` 67 | 68 | ## PathUtil 69 | 来自 G2，用于操作图形路径的工具类。具体提供的方法如下： 70 | 71 | | 方法 | 参数说明 | 返回结果 | 72 | | ----------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | 73 | | `getBoundingClientRect(node)` | `node`:HTMLElement，dom 节点 | 返回该节点在页面中的位置，返回结果格式为： `{top: , bottom: , left: , right}` | 74 | | `getStyle(dom, name)` | `dom`:HTMLElement，DOM 节点；`name`:String，样式名 | 返回该节点对应样式名 name 的具体样式。 | 75 | | `modifyCSS(dom, css)` | `dom`:HTMLElement，DOM 节点；`css`:Object，样式属性 | 修改对应节点的 css 样式，返回修改样式后的 dom 对象。 | 76 | | `createDom(str)` | `str`:String，Dom 字符串 | 按照传入的 str 创建 dom 节点，并返回创建的节点。 | 77 | | `getRatio()` | -- | 返回屏幕的像素分辨率。 | 78 | | `getWidth(el)` | `el`:HTMLElement，dom 节点 | 返回 dom 节点的宽度，不包含 padding、border | 79 | | `getHeight(el)` | `e`l:HTMLElement，dom 节点 | 返回 dom 节点的高度，不包含 padding、border | 80 | | `getOuterWidth(el)` | `el`:HTMLElement，dom 节点 | 返回 dom 节点的宽度，包含 padding、border | 81 | | `getOuterHeight(el)` | `el`:HTMLElement，dom 节点 | 返回 dom 节点的高度，包含 padding、border | 82 | | `addEventListener(target, eventType, callback)` | `target`:HTMLElement，DOM对象；`eventType`:String，事件名；`callback`:Function，回调函数 | 添加事件监听器 | 83 | | `requestAnimationFrame(fn)` | `fn`:Function，回调函数 | 用于定时循环操作。 | 84 | 85 | ## Util 86 | 默认提供的常见的工具类，大部分基于 lodash 封装。 87 | 如下： 88 | ```js 89 | const Util = { 90 | each: require('lodash/each'), 91 | map: require('lodash/map'), 92 | isObject: require('lodash/isObject'), 93 | isNumber: require('lodash/isNumber'), 94 | isString: require('lodash/isString'), 95 | isFunction: require('lodash/isFunction'), 96 | ... 97 | }; 98 | ``` 99 | 100 | #### [绘图属性](./graphic) 101 | 102 | 103 | -------------------------------------------------------------------------------- /bizGoblin/zh/api/geom.md: -------------------------------------------------------------------------------- 1 | 2 | # Geom 几何标记 3 | 4 | 几何标记对象，决定创建图表的类型。 5 | 6 | ## 几何标记和图表类型 7 | 8 | 下表展示了 BizGoblin 中的 geom 几何标记类型和传统图表的对应关系。 9 | 10 | geom 类型| 图表类型 | 备注 11 | -------- | -------- | -------- 12 | point| 点图、折线图中的点| 点的形状有很多，同时点也可以在不同坐标系下显示，所以可以扩展出非常多的图表类型。 13 | path| 路径图 | 路径图是无序的线图。 14 | line| 折线图、曲线图 | 在极坐标系下可以转换成雷达图。 15 | area| 区域图（面积图）、层叠区域图、区间区域图 |极坐标系下可用于绘制雷达区域图。 16 | interval| 柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图等| 通过坐标系的转置、变化，可以生成各种常见的图表类型；所有的图表都可以进行层叠、分组。 17 | polygon| 色块图（像素图）、热力图 | 多个点可以构成多边形。 18 | schema| k 线图，箱型图 | 自定义的图表类型。 19 | 20 | ## 父组件 21 | - [``](./chart.md) 22 | 23 | ## 子组件 24 | - none 25 | 26 | ## API 27 | 28 | Geom 支持的接口可以分为四大类： 29 | 30 | - 数据映射相关的属性函数：`position`, `color`, `shape`, `size` 31 | - 显示辅助信息的函数：`style` 32 | - 额外的控制函数：`adjust` 33 | - 动画配置函数：`animate` 34 | 35 | #### `type` 36 | * 类型：String 37 | * 描述：几何标记类型，目前 BizGoblin 支持的几何标记类型如下： 38 | 39 | type | 说明 40 | --- | --- 41 | `point` | 点，用于点图的构建。 42 | `path` | 路径，无序的点连接而成的一条线。 43 | `line` | 线，点按照 x 轴连接成一条线，构成线图。 44 | `area` | 填充线图跟坐标系之间构成区域图，也可以指定上下范围。 45 | `interval` | 使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。 46 | `polygon` | 多边形，可以用于构建热力图、地图等图表类型。 47 | `schema` | k线图，箱型图。 48 | 49 | #### `generatePoints` 50 | * 类型：String 51 | * 描述：是否生成多个点来绘制图形，true 时会生成多个点。line、path 默认为 false，其他 geom 类型均为 true。 52 | 53 | #### `sortable` 54 | * 类型：String 55 | * 描述：是否对数据按照 x 轴对应字段进行排序，true 时会进行排序。默认 area 和 line 类型会进行排序（即值为 true），其他类型均为 false。 56 | 57 | > 在绘制折线图或者区域图时，如果您的数据已经经过排序，可以将该属性设置为 false，以提高处理性能。 58 | 59 | #### `sstartOnZero` 60 | * 类型：String 61 | * 描述：用于设置图形的 Y 轴基线是否从 0 开始，默认为 true，以 0 为基线。默认值为true。 62 | 63 | #### `position` 64 | * 类型：String 65 | * 描述：位置属性的映射；用于确定由数据中的哪几个字段来确定数据在平面坐标系的位置。通俗地解释，即确定 x 轴和 y 轴的数据字段。它是唯一一个可以用于编码分类又可用于编码定序或者定量的数据属性。 66 | 67 | ```js 68 | 69 | 70 | ``` 71 | 72 | 使用 `*` 连接，position 属性会对多个字段进行数据的映射，如：cut*price，x*y 等，用于二维坐标系图表的绘制。 73 | 74 | #### `color` 75 | * 类型：String | Array 76 | * 描述：将数据值映射到图形的颜色上的方法。 77 | 78 | color 支持的映射值如下： 79 | - *'field'*，field 为数据字段名，内部会使用主题中的默认颜色进行数据值到颜色值的映射； 80 | 81 | ```js 82 | //代码示例 83 | 84 | ``` 85 | - ['field', colors]，将数据值映射至指定的颜色值 colors（可以是字符串也可以是数组），此时用于通常映射分类数据； 86 | 87 | ```js 88 | //代码示例 89 | 90 | ``` 91 | - ['field', 'color1-color2-colorN')]，指定颜色的渐变路径，用于映射连续的数据； 92 | 93 | ```js 94 | //代码示例 95 | 96 | ``` 97 | 98 | - ['field', callback)]，使用回调函数进行颜色值的自定义；可以使用多个字段使用*号连接 99 | 注意： 100 | color 属性的回调函数一般返回的单个颜色，因为 G2 中所有的 shape 仅支持单个颜色 101 | color 属性的回调函数也可以返回数组，数组中有多个颜色，但是这时候需要 shape 支持多颜色的解析，详细情况查看 [自定义shape](shape.md)。 102 | 103 | ```js 104 | //代码示例 105 | { 107 | //some code 108 | if(cut < 1000) 109 | return '#00ff00'; 110 | else 111 | return '#ff0000'; 112 | }]} 113 | /> 114 | ``` 115 | - color('#ffffff')，直接指定颜色常量，不进行数据映射。 116 | ```js 117 | //代码示例 118 | 119 | ``` 120 | 121 | #### `shape` 122 | * 类型： String | Array 123 | * 描述：将数据值映射到图形的形状上的方法。 124 | 125 | shape 支持的映射值如下： 126 | - 'field'，将指定的字段映射到内置的 shapes 数组中； 127 | ```js 128 | //代码示例 129 | 130 | ``` 131 | 132 | - ['field', shapes]，用户自己提供 shapes 数据，来进行数据映射； 133 | ```js 134 | //代码示例 135 | 136 | ``` 137 | 138 | - ['fields', callback]，使用回调函数获取 shape，用于个性化的 shape 定制，可以根据单个或者多个字段确定； 139 | ```js 140 | //代码示例 141 | { 143 | if(city == 'hangzhou'){ 144 | return circle; 145 | } 146 | return 'rect'; 147 | }]} 148 | /> 149 | 150 | ``` 151 | - 'shapeType'，指定常量，将所有数据值映射到固定的 shape。 152 | ```js 153 | //代码示例 154 | 155 | ``` 156 | 157 | #### `size` 158 | * 类型： String | Array | Number 159 | * 描述：对于不同的几何标记含义不完全一致： 160 | 161 | - 对于 point 点来说，size 对应着点的半径； 162 | - 对于 line 线来说，size 对应着线的粗细； 163 | - 对于 interval 柱状图来说，size 对应着柱子的宽度。 164 | 165 | size 支持映射值如下： 166 | - 'field'，指定映射到 size 的字段，使用内置的默认大小范围为 [1, 10]； 167 | ```js 168 | //代码示例 169 | 170 | ``` 171 | 172 | - ['field', [ min, max ]]，指定映射到 size 字段外，还提供了 size 的最大值和最小值范围； 173 | ```js 174 | //代码示例 175 | 176 | ``` 177 | 178 | - ['fields', callback)]，使用回调函数映射 size，用于个性化的 size 定制，可以使用多个字段进行映射； 179 | ```js 180 | //代码示例 181 | { 182 | if(count > 1000) 183 | return 10; 184 | else return 1; 185 | }]}/> 186 | ``` 187 | 188 | - Number，直接指定像素大小。 189 | ```js 190 | //代码示例 191 | 192 | ``` 193 | 194 | #### `adjust` 195 | * 类型：Object 196 | * 描述：声明几何标记对象的数据调整方式，可用于绘制层叠图、扰动图、分组图等。支持单一的数据调整方式也支持各种数据调整方式的组合。支持的调整类型包括： 'stack', 'dodge'。 197 | 198 | ```js 199 | 213 | ``` 214 | 215 | #### `style ` 216 | * 类型：Object | Array 217 | * 描述：配置几何图形的样式。当 style 的值是 Object 时，该 Object 中只能设置固定样式。当 style 的值是 Array 时，可以通过回调函数根据具体的数据去动态配置样式。 218 | 219 | ```js 220 | //代码示例 221 | { 229 | if(city === 'hangzhou' && sales > 1000) 230 | return "#ff0000"; 231 | return "#00ff00"; 232 | } 233 | }]} 234 | /> 235 | ``` 236 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/chartType.md: -------------------------------------------------------------------------------- 1 | # 图表类型 2 | 3 | 4 | 数据可视化的核心在于可视化编码，而可视化编码由几何标记和视觉通道组成。在可视化设计中我们将常见的 *几何标记* 定义成图表类型。 5 | 6 | 根据 *几何标记* 可以代表的数据维度来划分，*几何标记* 分为： 7 | * 零维，点是常见的零维几何标记，点仅有位置信息 8 | * 一维，常见的一维几何标记有线 9 | * 二维，二维平面 10 | * 三维，常见的立方体、圆柱体都是三维的几何标记 11 | 12 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad6383d14791764763234581d755f/attach/4080/900/image.png) 13 | 14 | ## 几何标记自由度 15 | 16 | [Coord坐标系](../api/coord)代表了图形所在的空间维度，而图形空间的自由度是在不改变图形性质的基础下可以自由扩展的维度，自由度 = 空间维度 - 几何标记的维度，那么： 17 | * 点在二维空间内的自由度是2，就是说可以沿x轴、y轴方向进行扩展 18 | * 线在二维空间内的自由度是1，也就说线仅能增加宽度，而无法增加长度 19 | * 面在二维空间内的自由度是0，我们以一个多边形为示例，在不改变代表多边形的数据前提下，我们无法增加多边形的宽度或则高度 20 | * 面在三维空间的自由度是1，我们可以更改面的厚度 21 | 22 | ![image](https://zos.alipayobjects.com/rmsportal/UfRqvqQJZGiiwqY.png) 23 | 24 | 几何标记的自由度与数据能够映射到图形的视觉通道size（大小）相关，这个角度上来讲： 25 | * 点可以映射两个数据字段字段到点的大小上（当然现实中我们仅仅映射一个） 26 | * 线可以映射一个数据字段字段到线的宽度 27 | * 柱状图的矩形可以映射一个数据字段到宽度上 28 | * 封闭的多边形无法使用数据映射到大小 29 | 30 | ## 图表类型和几何标记 31 | 32 | 我们根据图形本身的维度和其自由度将几何标记在可视化框架中的实现进行了分类： 33 | * point（点图）,虽然点的自由度是2，但是我们一般只映射一个字段到点的size上，x轴和y轴方向同时扩展大小； 34 | * path(路径图)、line(线图)，x轴方向上无序的的线是path,x轴方向有序的线是线图，线图又分为折线图和曲线图； 35 | * area(区域图)，填充折线和x轴闭合的区域，构建成为区域图，区域图是二维的，其自由度是0，无法进行size的扩展； 36 | * interval(区间图）、常见的柱状图、玫瑰图、饼图都是区间图，其图形是以y轴方向的长度表示数据的大小，x轴方形可以自由扩展，其自由度是1； 37 | * polygon(多边形），多个点构建的封闭的多边形，自由度是0，无法进行size的扩展； 38 | * heatmap（热力图）,热力图使用颜色来代表数据分布，绘制的过程根据数据点在画布上的影响范围进行颜色的设置，其自由度是2，但是我们往往只指定一个常量字段，指定点的影响范围； 39 | * schema （自定义），无法被上面覆盖的几何标记都放到这个分类下，常见的k线图，箱型图，其自由度与其表达的数据相关。 40 | 41 | ## 图表类型和图形形状 42 | 43 | 我们说图表类型是几何标记在可视化框架中的一种实现方式，这是一种非常粗粒度的划分，对于每一种图表类型来说，图形在绘制的时候有不同的形状，视觉通道跟图形属性的映射方式不一样也会生成不同的图形： 44 | 45 | * 点图，可以使用圆点、三角形、正方形、十字符号等形状表示点 46 | * 线图，可以有折线、曲线、点线等 47 | * 多边形，可以是实心的多边形，也可以是空心的仅有边框的多边形 48 | 49 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad680ae14791771922383476d17d3/attach/4080/900/image.png) 50 | 51 | 这就产生了我们在前面提到的视觉通道中Shape（图形形状），图形形状决定了各个视觉通道和图形属性的映射，使用边框颜色还是填充颜色、使用点线还是实线，使用平滑线还是折线，都是由图形形状Shape决定的。 52 | 53 | 下图是各类型几何标记对应支持的shape： 54 | 55 | geom 类型 | shape 类型 | 解释 56 | -------|---------|---- 57 | point| 'circle','square','bowtie','diamond','hexagon','triangle','triangle-down',
'hollowCircle','hollowSquare','hollowBowtie','hollowDiamond',
'hollowHexagon','hollowTriangle','hollowTriangle-down',
'cross','tick','plus','hyphen','line'| hollow开头的图形都是空心的 58 | line| 'line','smooth','dot','dash','dotSmooth','spline'| dot ：点线，smooth：平滑线 59 | area| 'area','smooth','line','dotLine','smoothLine','dotSmoothLine'| [area]和[smooth]是填充内容的区域图，其他图表是空心的线图 60 | interval| 'rect','hollowRect','line','tick','stroke'| [hollowRect]是空心的矩形， [line]和 [tick] 都是线段,stroke：带边框的矩形 61 | polygon|'polygon','hollow','stroke'| polygon：多边形、hollow：空心多边形和 stroke：带边框的多边形 62 | schema| 'box','candle'| 目前仅支持箱须图、K线图 63 | 64 | ## 如何设计Shape 65 | 66 | 对于每个Shape的实现，我们需要确定以下内容： 67 | 68 | * 支持的视觉通道 69 | * 映射到各个视觉通道的数据格式 70 | * 图形对应的数据条数 71 | * 图形的点的个数 72 | 73 | ### 支持的视觉通道 74 | 75 | 不同的Shape支持的视觉通道不同，以G2实现的视觉通道为例： 76 | 77 | * position(位置），所有的图表类型的Shape都支持这个属性 78 | * color(颜色），所有的图表类型的Shape都支持这个属性，但是映射到图形的边框还是填充图形，由各个Shape自己决定 79 | * size(大小），由上面介绍的几何标记的自由度决定 80 | * opacity(透明度），跟颜色类似 81 | 82 | ### 接收的数据格式 83 | 84 | 对于G2来说，接收的数据都是标准的JSON数组，单条数据字段的格式支持2种类型： 85 | 86 | * 数值、字符串等标量值 87 | * 数组，多个标量值构成的数组 88 | 89 | 所以对于一个Shape来说需要定义好各个视觉通道支持的数据字段格式，下面的示例说明这个问题 90 | 91 | #### 柱状图 92 | 93 | 柱状图是图表类型interval的一个Shape ‘rect’定义的，各个视觉通道支持的数据格式： 94 | 95 | * position 支持3种数据类型： 96 | + x，y都是单个标量值，如 {name: '分类一',value: 100} 97 | + x是单个标量值，y是一个数组，如 {name: '分类一',range: [10, 100]} 98 | + x是数组，y是单个标量值，例如学生成绩分布 {score: [60,70],count: 30} 99 | 100 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad6383d14791772321173794d7553/attach/4080/900/image.png) 101 | 102 | * color 仅支持一个标量值字段 103 | * size 仅支持数字标量值 104 | * opacity 支持数字标量值，范围 0-1 105 | 106 | 各个图形对数据格式的支持，我们在后面章节中一一介绍。 107 | 108 | ### 需要的数据条数 109 | 110 | 数据映射到图形时，数据跟图形的对应关系对于不同的图表类型（数据标记）来说各不相同： 111 | 112 | * point(点图），点图的数据条数和图形的对应关系，可以是1：1,也可以是1:n。如果对应位置的映射字段x,y都是单个标量，那么就是1：1,如果y是数组，那么就是1:n。 113 | 114 | ```js 115 | // 1: 1的数据 116 | var data = [{month: '一月', temperature: 10} , {month: '二月', temperature: 15}] 117 | // 1: 2的数据 118 | var data = [{month: '一月', temperature: [0,10]} , {month: '二月', temperature: [5,15]}] 119 | ``` 120 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad680ae14791772516552748d17c0/attach/4080/900/image.png) 121 | 122 | * line（线图）和path(路径图），如果对应位置的映射字段x,y都是单个标量多条记录对应一条线,对应关系是n:1。如果y是数组，那么会生成多条记录对应关系是 n: n。同上面point的数据： 123 | 124 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad680ae14791772666152763d17c0/attach/4080/900/image.png) 125 | 126 | * interval 一条记录生成一个图形，1:1 127 | 128 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad680ae14791772797452741d17cd/attach/4080/900/image.png) 129 | 130 | * area(区域图），多条数据生成一个图形，无论对应位置的对应字段的格式如何 131 | 132 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad680ae14791772949916082d17d9/attach/4080/900/image.png) 133 | 134 | * polygon，一条数据对应一个图形, 1: 1。 135 | * heatmap，多条记录生成一张图 n: 1 136 | * contour, 多条记录生成多条等高线 m: n 137 | 138 | ### 需要的点的个数 139 | 140 | 绘制图形时，需要根据当前的数据生成图形的点，然后使用线或者弧连接起来，不同的图形需要点的个数不同: 141 | 142 | * point，点图绘制时只需要一个点即可 143 | * line,path，绘制折线图/路径图时需要折线图上的多个点 144 | * area，绘制区域图时，需要代表数据的点与x轴上点 145 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad680ae14791773113276092d17d9/attach/4080/900/image.png) 146 | * interval,绘制柱状图、玫瑰图、饼图时，需要知道四个顶点 147 | ![image](https://zos.alipayobjects.com/basement/skylark/0ad6383d14791773251113852d7553/attach/4080/900/image.png) 148 | 149 | * polygon，绘制多边形时，每个顶点都需要一个点 150 | * heatmap，绘制热力图时需要多个点 151 | 152 | ## 如何自定义Shape 153 | 在 [Shape 的 api 文档](../api/shape)中详细介绍了用户如何自定义几何图形。 154 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/qa.md: -------------------------------------------------------------------------------- 1 | # 常见问题 2 | 3 | ## 有问题怎么办 4 | 5 | - 建议将所有问题相关的教程、api文档及相关的 demo 都看一遍，如果还有问题，欢迎提 [issue](https://github.com/alibaba/BizCharts/issues) 6 | - issue 中请务必提供可复现的链接，方便排查问题。链接可以在 Codepen 中 fork [Bizcharts codepen template](https://codepen.io/leslie2014/pen/xjJGER) 后生成。 7 | - 使用过程中如果遇到问题无法自行解决，可扫码加入钉钉群群求帮助 8 | 9 | ![](https://img.alicdn.com/tfs/TB1Cu79l3HqK1RjSZFkXXX.WFXa-340-339.png) 10 | 11 | 12 | ## 坐标轴空间不够 13 | 14 | - 通过配置 `` 组件的 [padding属性](../api/chart#padding) 调整图表的内边距给非图形区更多空间。 15 | - 通过配置 `` 组件中 [content属性](../api/axis#content) 上的 formatter 或者 rotate 值，让 label 的文字占用更少的空间。 16 | 17 | ## 坐标轴label自定义 18 | 19 | - 通过配置 `` 组件中 [content属性](../api/axis#content) 上的 formatter 函数控制。 20 | 21 | ## tooltip显示 22 | 23 | - 通过 `` 组件上的 [tooltip 属性](../api/geom#tooltip)控制 tooltip 中的显示内容 24 | - 通过 `` 组件上的 [itemTpl](../api/tooltip#itemtpl) 和 [containerTpl](../api/tooltip#containertpl) 两个属性用通过 HTML 去控制 tooltip 的显示。 25 | - 特别复杂的场景可以通过 `` 上的 [onTooltipChange](../api/chart#onTooltipChange) 事件来格式化 `` 显示内容。 26 | 27 | ## tooltip自定义 28 | 29 | - 通过 `` 组件上的 [itemTpl](../api/tooltip#itemTpl) 和 [containerTpl](../api/tooltip#containerTpl) 两个属性用通过 HTML 去控制 tooltip 的显示。 30 | 31 | ```JSX 32 | 33 | 51 | 52 | ``` 53 | 54 | ## Legend 中分类过多，导致部分内容被遮盖该怎么处理？ 55 | 56 | 这种情况下可以通过自定义 Legend 展示来解决：设置 **useHtml** 属性为 true，同时设置 **g2-legend** 对 legend 的样式做调整。具体 [g2-legend]( http://www.bizcharts.net/products/bizCharts/api/legend#g2-legend--g2-legend-item--g2-legend-list-item--g2-legend-marker--g2-legend-text---object) 57 | 58 | 59 | ## 切换到其他页面再切换回的时候，图表会超出原来宽度，必须 resize 浏览器窗口才可恢复 60 | 61 | 首先推荐容器初始化时设置容器 size，如果切换页面后还有自适应问题，可以设置图表 **forcetFit**，例如： 62 | ```javascript 63 | render() { 64 | if (this.chart) { 65 | this.chart.forceFit(); 66 | } 67 | return ( { 70 | this.chart = chart; 71 | }} 72 | />); 73 | } 74 | ``` 75 | 除此之外，还可以在组件 componentDidMount 时，主动触发 window resize 事件。 76 | 77 | 78 | ## 标题和坐标轴重合怎么解决? 79 | 80 | 可以通过设置 ```Axis``` 的 title 属性来解决，例如： 81 | ```JSON 82 | { 83 | offset: {Number}, // 设置标题 title 距离坐标轴线的距离 84 | } 85 | ``` 86 | 具体 API 可参考以下：[Axis](../api/axis#api) 87 | 88 | 89 | ## 如何修改指定某个数据的颜色？ 90 | 91 | Geom 上的 **color** 属性支持对字段自定义颜色，具体 API 可参考以下：[Geometry](../api/geom#api) 92 | 93 | 94 | ## 坐标轴刻度非常密，导致部分文字被遮盖 95 | 96 | 可以通过修改坐标轴 ```Axis``` 的 **label** 属性，调整坐标轴文字的排版，具体 API 可参考： 97 | [Axis](../api/axis#api) 98 | 99 | 100 | ## 坐标轴连续的数据集，如何做分段展示？ 101 | 102 | 可以设置 Chart ```scale``` **formatter** 属性做数据格式化处理，具体 API 可参考：[Scale](../api/chart#api) 103 | 104 | 105 | ## 如何通过拿到点图中某一个点的坐标，来拿到这个点，并这个点处于hover状态？ 106 | 107 | 可以通过底层的 ```geom.setShapesActived``` ，```geom.getShapes()``` 方法来实现. 108 | 109 | ## 如何让折线图中的线变得圆滑？ 110 | 111 | 可以通过设置 `````` 解决 112 | 113 | 114 | ## 图表支持框选操作与右键操作吗？ 115 | 116 | 右击操作暂不支持，未来会有支持计划；框选操作可以实现，具体可以参考 Demo: [Demo](../demo/detail?id=g2-brush-interval&selectedKey=概览) 117 | 118 | 119 | ## 图表设置 padding 为 auto 后，这个 padding 是如何计算的？ 120 | 121 | 目前是只会计算 **formatter** 前 label 的边框，暂时可以先手动设置 padding 的边距来解决。 122 | 123 | 124 | ## 图表如何保存为图片格式？ 125 | 126 | 1. 拿到 chart 实例： 127 | 128 | ```JSX 129 | { 131 | chartIns.downloadImage(); 132 | }} 133 | /> 134 | ``` 135 | 136 | 137 | ## 如何知道 canvas 渲染完成？ 138 | 139 | 可以通过拿到 chart 实例，并监听 ```afterrender``` 事件实现。如何拿到 g2 chart 实例可以参考：[API](../api/chart#%E4%BA%8B%E4%BB%B6api) 140 | 141 | ## 如何获取Canvase实例 142 | 143 | ```JSX 144 | { 145 | console.log(chartIns.get('canvas')); // 可以拿到g 的canvas实例，然后你可以使用g的语法来画。 146 | console.log(chartIns.get('canvas')._cfg.el); // 拿到Dom 147 | }}> 148 | ``` 149 | 150 | ## 为什么图表绘制区域会有留白情况？ 151 | 152 | 这种情况是因为图表默认有 padding 造成的，而且 padding 不对称，可以通过调整 padding 解决。 153 | 154 | 155 | ## 如何调整柱状图间的间距？ 156 | 157 | 可以通过设置 Geom 的 **marginRatio** 调柱子间距，具体 API 可参考：[API](../api/geom#api) 158 | 159 | 160 | ## 如何知道 tootip 在鼠标左边还是右边？ 161 | 162 | tooltip 的局部目前只有CSS效果，在左边右边是没有属性值区分的，要自己去写逻辑判断，比如你可以在 tooltip ```onShow``` 的回调中做判断。 163 | 164 | 165 | ## value都为0的情况下，能否显示饼图？ 166 | 167 | 不能。 168 | 169 | 170 | ## 在 Facet 中，多个图的 tooltip 可以联动显示吗？ 171 | 172 | 默认是不可以的。但可以自定义tooltip的内容达到同样的效果 173 | ```shared: true``` 174 | 175 | ## 怎么设置tooltip init初始化时就默认选中某一个选项 176 | 177 | ```js 178 | const data = [ 179 | { category: 'Sports', sold: 275 }, 180 | { category: 'Strategy', sold: -255 }, 181 | { category: 'Action', sold: 120 }, 182 | { category: 'Shooter', sold: 650 }, 183 | { category: 'Other', sold: 150 } 184 | ] 185 | 186 | // 默认选中第四项的结果 187 | const handleAlwaysShowTooltip = ev => { 188 | ev.showTooltip(ev.getXY(data[3])) 189 | } 190 | 191 | 192 | ``` 193 | ![](https://img.alicdn.com/tfs/TB1jAs2vmcqBKNjSZFgXXX_kXXa-569-470.png) 194 | 195 | 196 | ## 图表展示bizcharts error 和 slider error 是什么原因？ 197 | bizchart引入了react 16.x的Error Boundary，从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃；未被任何异常边界捕获的异常可能会导致整个 React 组件树被卸载。Error Boundary能够捕获渲染函数、生命周期回调以及整个组件树的构造函数中抛出的异常，捕获后返回bizcharts error这样的提示。 -------------------------------------------------------------------------------- /bizCharts/zh/api/coord.md: -------------------------------------------------------------------------------- 1 | 2 | # Coord 3 | 4 | 坐标系组件。 5 | 坐标系是将两种位置标度结合在一起组成的 2 维定位系统，描述了数据是如何映射到图形所在的平面。BizCharts 将坐标系抽象为组件，并且包含两种类型坐标系极坐标系（polar、theta、helix 均属于极坐标）和笛卡尔坐标系，目前所有的坐标系均是 2 维的。 6 | 7 | ## 父组件 8 | [``](chart) [``](view) 9 | 10 | ## 子组件 11 | 无 12 | 13 | ## 使用说明 14 | - Coord组件用来描述图表中各元素绘制时所处的坐标系，一般一个图表中只存在一个坐标系；但是[``](view)中可以有独立坐标系存在；若没有特别说明，则默认当前图表的坐标系为**直角坐标系（rect）**。 15 | 16 | - 默认采用笛卡尔坐标系，若要改变坐标系可以通过[type](#type)属性改变。 17 | 18 | 例如下图展示的层叠柱状图，在不同坐标系下就变换成了其他的图表类型： 19 | 20 | ![image](https://zos.alipayobjects.com/skylark/fd9ba64b-b569-4c1d-acb9-d4dad3500258/attach/2378/44af7b435f0d3f88/image.png) 21 | 22 | 上图左侧为层叠柱状图，中间的饼图则是层叠柱状图在极坐标下对 x y 两个坐标轴进行转置后的结果，其中 x 轴被映射为半径，y 轴被映射成了角度。而最右边的牛眼图则相反，y 轴映射为半径。 23 | 24 | - 极坐标默认的起始角度和结束角度如下图所示： 25 |

26 | 27 | ## API 28 | 29 | #### `type` 30 | * 类型：String 31 | * 描述：坐标系类型;不同类型的坐标系所支持的配置属性也不一样。具体见各类型属性说明。 32 | 33 | BizCharts 中支持的坐标系有： 34 | 35 | | 类型 | 说明 | 36 | | :-- | :-- | 37 | | [rect](#rect) | 默认类型，直角坐标系，由 x, y 两个垂直的维度构成。 | 38 | | [polar](#polar) | 极坐标系，由角度和半径 2 个维度构成。| 39 | | [theta](#theta) | 一种半径固定的极坐标系，常用于饼图。 | 40 | | [helix](#helix) | 螺旋坐标系，基于阿基米德螺旋线。| 41 | 42 | #### `rotate` 43 | * 类型：Number 44 | * 描述：坐标系旋转，angle 表示旋转的度数，单位为角度。 45 | 46 | #### `scale` 47 | * 类型：Array 48 | * 描述：放大、缩小，默认按照坐标系中心放大、缩小。 49 | 参数为长度2的数组，第一个值代表 x 方向缩放比例，第二个值代表 y 方向缩放比例。 50 | ```js 51 | 52 | ``` 53 | ![image](https://zos.alipayobjects.com/rmsportal/bAISlaEvIUpqIFVBiXKo.gif) 54 | 55 | #### `reflect` 56 | * 类型：'x' | 'y' | Array 57 | * 描述：镜像, 沿 x 方向镜像或者沿 y 轴方向映射。默认值为：'y'. 58 | 如果参赛是个数组，将依次调用.例如['x', 'y'] 则先执行x方向翻转`reflect('x')` 再执行y方向翻转`reflect('y')`,以此类推。 59 | ![image](https://zos.alipayobjects.com/skylark/3e02d865-fcfc-4afd-9ffa-66a1299b31b5/attach/2378/4225fd7483f54155/image.png) 60 | 61 | #### `transpose` 62 | * 类型: Boolean 63 | * 描述: 将坐标系 x 轴和 y 轴交换. 64 | ![image](https://img.alicdn.com/tfs/TB1yYMVopooBKNjSZPhXXc2CXXa-534-157.png) 65 | 66 | 67 | ## 直角坐标系（rect） 68 | 无额外配置参数。 69 | 70 | ## 极坐标系（polar/theta/clock/gauge） 71 | ![5.png](https://img.alicdn.com/tfs/TB1nBh1vHSYBuNjSspiXXXNzpXa-1200-280.png) 72 | 73 | 74 | 75 | ### polar、theta 类型的极坐标系配置 76 | 77 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 78 | | :-- | :-- | :-- | :-- | :-- | 79 | | radius | 设置半径，值为 0 至 1 的小数 | Number | | | 80 | | innerRadius | 内部极坐标系的半径，[0 - 1]的小数 | Number | | | 81 | | startAngle | 起始角度（弧度） | Number | | | 82 | | endAngle | 结束角度（弧度） | Number | | | | 83 | ```js 84 | //polar 示例 85 | 86 | ``` 87 | 效果如图： 88 |

89 | 90 | ```js 91 | //theta 示例 92 | 93 | ``` 94 | 效果如图： 95 |

96 | 97 | 98 | ### gauge 类型的极坐标系配置 99 | 100 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 101 | | :-- | :-- | :-- | :-- | :-- | 102 | | startAngle | 起始角度（弧度） | Number | | | 103 | | endAngle | 结束角度（弧度） | Number | | | | 104 | 105 | 106 | ### clock 类型的极坐标系配置 107 | 无额外配置属性。 108 | 109 | ```js 110 | // 这里只显示部分核心代码 111 | 112 | 113 | 114 | 115 | 116 | ``` 117 | 118 | 119 | ## map 地理坐标系 120 | 121 | > 地理坐标系，支持不同类型的地理投影。 122 | 123 | ![](https://os.alipayobjects.com/s/prod/antv/static/images/g2/10-map/world-albers-df1c49630c8e60fdd3cecdbff2705e0f.png) 124 | 125 | 对于 `map` 类型的坐标系，情况比较特殊，对于不同的投影支持的可配置属性不同。如下所示： 126 | 127 | > 适用于中国地图的 albers 投影 128 | 129 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 130 | | :-- | :-- | :-- | :-- | :-- | 131 | | projection | 指定投影方法 | String | albers | | 132 | | basic | 指定投影方法的基本参数，[λ0, φ0, φ1, φ2] 分别表示中央经度、坐标起始纬度、第一标准纬度、第二标准纬度度 | Array | [110, 0, 25, 47] | | 133 | | max | 指定投影后最大的坐标点 | Array | [16.573, -13.613] | | 134 | | min | 指定投影后最小的坐标点 | Array | [-27.187, -49.739] | | | 135 | 136 | > 适用于世界地图的 albers 投影 137 | 138 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 139 | | :-- | :-- | :-- | :-- | :-- | 140 | | projection | 指定投影方法 | String | albers | | 141 | | basic | 指定投影方法的基本参数，[λ0, φ0, φ1, φ2] 分别表示中央经度、坐标起始纬度、第一标准纬度、第二标准纬度度 | Array | [0, 0, 0, 60] | | 142 | | max | 指定投影后最大的坐标点 | Array | [161.89, 120.635] | | 143 | | min | 指定投影后最小的坐标点 | Array | [-144.485, -27.666] | | | 144 | 145 | > 适用与中国地图的 mercator 投影 146 | 147 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 148 | | :-- | :-- | :-- | :-- | :-- | 149 | | projection | 指定投影方法 | String | mercator | | 150 | | max | 指定投影后最大的坐标点 | Array | [161.89, 120.635] | | 151 | | min | 指定投影后最小的坐标点 | Array | [-144.485, -27.666] | | | 152 | 153 | > 适用于世界地图的 mercator 投影 154 | 155 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 156 | | :-- | :-- | :-- | :-- | :-- | 157 | | projection | 指定投影方法 | String | mercator | | 158 | | max | 指定投影后最大的坐标点 | Array | [134.77, 63.68] | | 159 | | min | 指定投影后最小的坐标点 | Array | [73.60, 18.48] | | | 160 | 161 | 162 | 163 | ## helix 螺旋坐标系配置 164 | > 螺旋坐标系，常用于周期性数据。 165 | 166 | 对于螺旋坐标系，其可配置的参数如下： 167 | 168 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 169 | | :-- | :-- | :-- | :-- | :-- | 170 | | radius | 设置半径，值为 0 至 1 的小数 | Number | | | 171 | | startAngle | 螺旋线起点弧度 | Number | | | 172 | | endAngle | 螺线线终点弧度 | Number | | | 173 | 174 | ```js 175 | //示例 176 | 177 | ``` 178 | 效果如图： 179 |

180 | -------------------------------------------------------------------------------- /bizCharts/zh/api/sliderPlugin.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/language-react-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![NPM Package](https://img.shields.io/npm/v/bizcharts-plugin-slider.svg)](https://www.npmjs.com/package/bizcharts)[![NPM Downloads](https://img.shields.io/npm/dm/bizcharts-plugin-slider.svg)](https://npmjs.org/package/bizcharts) 2 | 3 | # bizcharts-plugin-slider 4 | 5 | A datazoom slider plugin for BizCharts base g2-plugin-slider. 6 | 7 | ## Installation 8 | 9 | Please make sure BizCharts has been already loaded. 10 | 11 | ### npm 12 | ```sh 13 | $ npm install bizcharts-plugin-slider 14 | ``` 15 | 16 | ### html 17 | ```html 18 | 19 | ``` 20 | 21 | ### dev build 22 | ```sh 23 | $ git clone https://github.com/alibaba/BizCharts.git 24 | $ cd BizCharts 25 | $ cd /plugin/slider 26 | $ npm install 27 | $ npm run build 28 | ``` 29 | 30 | ### dev demo 31 | 32 | ```sh 33 | slider $ sudo vi /etc/hosts 34 | // add 127.0.0.1 localhost 35 | slider $ npm run demo 36 | // open in browser http://localhost:3510/ 37 | ``` 38 | 39 | ## Usage 40 | 41 | [see demo](../demo/detail?id=g2-area-large&selectedKey=概览) 42 | 43 | ### Create an instance 44 | 45 | ```js 46 | 61 | ``` 62 | ## Api 63 | 64 | #### `width` 65 | * 类型：number | string 66 | * 描述：Set the width of the `slider` component, the default is `auto`, indicating the width of the adaptive container. 67 | 68 | #### `height` 69 | * 类型：number 70 | * 描述：Set the height of the `slider` component, the default is 26, the unit is '`px`'. 71 | 72 | #### `padding` 73 | * 类型：Array 74 | * 描述：Sets the padding canvas's canvas's padding to align with the chart (the default chart's canvas container is padded with padding). The default is the same padding as `BizCharts` default theme, `[20, 20, 95, 80]`. 75 | 76 | #### `xAxis` 77 | * 类型：string 78 | * 描述：**Must declare** Slider is a slider component with a background graph that is used to declare the horizontal axis mapping field of the background chart, which is also the data filtering field. 79 | 80 | #### `yAxis` 81 | * 类型：string 82 | * 描述：**Must declare** Slider is a slider component with a background graph that is used to declare the vertical axis of the background graph. 83 | 84 | #### `data` 85 | * 类型： array | dataview 86 | * 描述：**Must declare**，data source. 87 | 88 | #### `start` 89 | * 类型：number | string 90 | * 描述：The value of the slider that declares the position of the slider at the beginning of the corresponding data value, the default is the minimum value. 91 | 92 | #### `end` 93 | * 类型：number | string 94 | * 描述：The data value corresponding to the position where the slider finishes the slider is declared, and the default is the maximum value. 95 | 96 | #### `scales` 97 | * 类型：object 98 | * 描述：Used to define the columns for the `xAxis` and `yAxis` fields for the same column definitions in the action's chart. 99 | 100 | Sample code: 101 | 102 | ```js 103 | 111 | ``` 112 | 113 | * `fillerStyle` object 114 | * 类型：number | string 115 | * 描述： 116 | 117 | The selected area of the style configuration, the default configuration is as follows: 118 | 119 | ```js 120 | 126 | ``` 127 | 128 | Red box in the picture selected area:

129 | 130 | #### `backgroundStyle` 131 | * 类型：object 132 | * 描述：slider background style. 133 | 134 | #### `textStyle` 135 | * 类型： object 136 | * 描述：slider auxiliary text font style configuration. 137 | 138 | #### `handleStyle` 139 | * 类型： object 140 | * 描述：The slider style configuration, configurable properties are as follows: 141 | 142 | ```js 143 | 150 | ``` 151 | 152 | #### `backgroundChart` 153 | * 类型：object 154 | * 描述：The slider's background chart configuration allows you to configure its chart type and color: 155 | 156 | ```js 157 | 163 | ``` 164 | 165 | #### `onChange` 166 | * 类型：function 167 | * 描述：When the slider slider changes, trigger the callback function, mainly used to update the state of `ds`. The callback function provides a parameter, which is an object that contains the following properties: 168 | 169 | ```js 170 | { 172 | const { startValue, endValue, startText, endText } = obj; 173 | }} 174 | /> 175 | 176 | 177 | - `startValue` The current raw data value corresponding to the start slider, if the type is` time` or `timeCat`, the value is timestamp, please note. 178 | - `endValue` The current corresponding raw data value of the end slider, if the type is` time` or `timeCat`, the value is timestamp, please note. 179 | - `startText` Start slider current display text value 180 | - `endText` The current display text value of the end slider 181 | 182 | ``` 183 | 184 | > NOTE: The reason for distinguishing text from value is that users will format numbers in most cases. Therefore, when setting the state quantity and updating the state quantity, you need to ensure that the value types are the same before and after. -------------------------------------------------------------------------------- /bizCharts/zh/api/scale.md: -------------------------------------------------------------------------------- 1 | # scale 度量 2 | 3 | 度量 Scale，是数据空间到图形空间的转换桥梁，负责原始数据到 [0, 1] 区间数值的相互转换工作。针对不同的数据类型对应不同类型的度量。 4 | 5 | ## 类型 6 | 7 | 度量的类型是由原始数据的值类型所决定的，所以在介绍度量的类型之前，需要了解下 BizCharts 对数据的分类方式。 8 | 9 | 根据数据的类型，支持以下几种度量类型： 10 | 11 | + **identity**，常量类型的数值，也就是说数据的某个字段是不变的常量； 12 | + **linear**，连续的数字 `[1, 2, 3, 4, 5]`； 13 | + **cat**，分类, `['男', '女']`； 14 | + **time**，连续的时间类型； 15 | + **timeCat**，非连续的时间，比如股票的时间不包括周末或者未开盘的日期； 16 | + **log**，连续非线性的 Log 数据，将 `[1, 10, 100, 1000]` 转换成 `[0, 1, 2, 3]`（假设底数是 `10`）； 17 | + **pow**，连续非线性的 pow 数据，将 `[2, 4, 8, 16, 32]` 转换成 `[1, 2, 3, 4, 5]`。 18 | 19 | ## 使用示例 20 | 21 | ```js 22 | const data = [ 23 | {"month": "一月", "temperature": 7, "city": "tokyo"}, 24 | {"month": "二月", "temperature": 6.9, "city": "newYork"}, 25 | {"month": "三月", "temperature": 9.5, "city": "tokyo"}, 26 | {"month": "四月", "temperature": 14.5, "city": "tokyo"}, 27 | {"month": "五月", "temperature": 18.2, "city": "berlin"} 28 | ]; 29 | 30 | const scale = { 31 | month: { 32 | alias: '月份' // 为属性定义别名 33 | }, 34 | temperature: { 35 | alias: '温度' // 为属性定义别名 36 | } 37 | }; 38 | 39 | 40 | ``` 41 | 42 | 在上述数据中，`month` 代表月份，`temperature` 代表温度，`city` 代表城市，其中 `month` 和 `city` 都是分类类型数据，但是不同的是 `month` 作为月份是有序的分类类型，而 `city` 是无序的分类类型，而 `temperature` 是连续的数值类型。 43 | 44 | ## 属性 45 | 46 | ### 通用属性 47 | 48 | #### `type` 49 | * 类型：string 50 | * 描述：度量的类型，可选值有：`linear`、`cat`、`log`、`pow`、`time` 和 `timeCat`. 51 | 52 | 不同类型的度量属性也不一样，想见各类型属性说明。 53 | 54 | #### `alias` 55 | * 类型: string 56 | * 描述: 为数据属性定义别名，用于图例、坐标轴、tooltip 的个性化显示. 57 | 58 | #### `range` 59 | * 类型: array 60 | * 描述: 数值范围区间，即度量转换的范围，默认为 [0, 1]. 61 | 62 | #### `formatter` 63 | * 类型: function 64 | * 描述: 回调函数，用于格式化坐标轴刻度点的文本显示，会影响数据在坐标轴、图例、tooltip 上的显示. 65 | 66 | - `value` __*__ 67 | 68 | 对应点的原始数据 69 | 70 | - 返回值 71 | 72 | `string`，对应点的坐标轴、tooltip 以及图例上展示的内容。 73 | 74 | 75 | ### linear 76 | 连续的数据值，如这一组数据：[1, 2, 3, 4, 5]，除了通用的属性外，还包含以下自有属性: 77 | 78 | #### `nice` 79 | * 类型: boolean 80 | * 描述: 用于优化数值范围，使绘制的坐标轴刻度线均匀分布。例如原始数据的范围为 `[3, 97]`，如果 `nice` 为 `true`，那么就会将数值范围调整为 `[0, 100]`。 81 | 默认值：`true` 82 | 83 | #### `min` 84 | * 类型：number 85 | * 描述：定义数值范围的最小值。 86 | 87 | #### `max` 88 | * 类型：number 89 | * 描述：定义数值范围的最大值。 90 | 91 | #### `range` 92 | * 类型：Array 93 | * 描述：数值范围区间，即度量转换的范围，默认为 `[0, 1]` 94 | 95 | #### `ticks` 96 | * 类型：Array 97 | * 描述：存储坐标轴上的刻度点文本信息 98 | 99 | #### `tickCount` 100 | * 类型：number 101 | * 描述：坐标轴上刻度点的个数，不同的度量类型对应不同的默认值 102 | 103 | #### `tickInterval` 104 | * 类型：number 105 | * 描述：用于指定坐标轴各个标度点的间距，是**原始数据**之间的间距差值，**`tickCount` 和 `tickInterval` 不可以同时声明。** 106 | 107 | #### `minLimit` 108 | * 类型：number 109 | * 描述：对数据的最小值的限制，无论数据中是否存在比这个值小的数据，生成的坐标点不会小于这个值. 110 | 111 | #### `maxLimit` 112 | * 类型：number 113 | * 描述：对数据的最大值的限制，无论数据中是否存在比这个值大的数据，生成的坐标点不会大于这个值. 114 | 115 | #### `formatter` 116 | * 类型：Function(value) 117 | * 描述：回调函数，用于格式化坐标轴刻度点的文本显示，会影响数据在坐标轴、图例、tooltip 上的显示。 118 | 119 | - `value` __*__ 120 | 121 | 对应点的原始数据 122 | 123 | - 返回值 124 | 125 | `string`，对应点的坐标轴、tooltip 以及图例上展示的内容。 126 | 127 | `说明：` 128 | - min,max,minLimt 和 maxLimit 都会影响坐标轴上坐标点的生成 129 | - min 和 minLimt 的差别主要体现在如果数据中的数据的范围是 10-20 对于 min: 0 来说，会生成从 0 - - 20 范围的坐标点，但是对于 minLimit 来说只要保证生成的坐标点不小于 0 即可，生成的坐标点的范围可能依然在 10 - 20 之间。 130 | - max 和 maxLimit 的差别同 min 和 minLimit 类似， max 体现在坐标轴上肯定会出现 max 或者比 max 大的值，但是绝对不会出现比 maxLimit 大的值。 131 | 132 | ### log 133 | 连续非线性的 log 类型度量，该度量会将 [1, 10, 100, 1000] 先转换成 [0, 1, 2, 3] 然后再进行归一化操作。log 类型的数据可以将非常大范围的数据映射到一个均匀的范围内。 134 | 135 | log 度量是 linear 的子类，支持所有通用的属性和 linear 度量的属性，特有的属性如下： 136 | 137 | #### `base` 138 | * 类型：number 139 | * 描述： 140 | > `type` 是 `log` 时适用 141 | 142 | 指定 log 函数的底数。 143 | 144 | 默认值：`2` 145 | 146 | >对于以下场景，建议将数据的度量类型指定为 log 类型： 147 | - 散点图中数据的分布非常广，同时数据分散在几个区间内是，例如分布在 0 - 100， 10000 - 100000，1千万 - 1亿内，这时候适合使用 log 度量； 148 | - 热力图中数据分布不均匀时也会出现只有非常高的数据点附近才有颜色，此时需要使用 log 度量，对数据进行 log 处理。 149 | 150 | 对比使用未使用 log 和使用了log 后的效果 151 | ```js 152 | // 数据 153 | const data = [ 154 | { site: '站点1', pv: 10 }, 155 | { site: '站点2', pv: 99 }, 156 | { site: '站点3', pv: 10000 } 157 | ]; 158 | const scale = { 159 | pv: { 160 | type: 'log', 161 | base: 10 162 | } 163 | }; 164 | 165 | ``` 166 | 167 | ![before](https://img.alicdn.com/tfs/TB1tAr9XcXIxuRkSO9eXXcSjFXa-1216-586.png) 168 | ![after](https://img.alicdn.com/tfs/TB1OUwdXcXIxuRkSRUgXXXuiVXa-1200-606.png) 169 | 170 | ### pow 171 | 连续非线性的 pow 类型度量，该度量将 [2, 4, 8, 16, 32] 先转换成 [1, 2, 3, 4, 5] 然后再进行归一化操作。 172 | 173 | pow 类型的度量也是 linear 类型的一个子类，除了支持所有通用的属性和 linear 度量的属性外也有自己的属性： 174 | 175 | #### `exponent` 176 | * 类型: Number 177 | * 描述: 指数 178 | 179 | ### time 180 | 连续的时间类型，是一种特殊的连续性数据。time 类型的度量也是 linear 的子类，除了支持所有通用的属性和 linear 度量的属性外，还有自己特殊的属性： 181 | 182 | #### `mask` 183 | * 类型：string 184 | * 描述：时间显示格式 185 | * 默认值：`'yyyy-mm-dd'` 186 | 187 | 188 | 数据的格式化格式。 189 | 190 | > 说明：mask 的占位符标准同 [moment](https://momentjs.com/docs/#/displaying/format/)、[fecha](https://github.com/taylorhakes/fecha); 191 | 192 | 目前 G2 会自动识别如下形式的时间格式，当用户需要生成 time 类型的度量时，建议将原始时间数据转换为如下形式： 193 | 194 | 1. 时间戳，如 `1436237115500`； 195 | 2. 时间字符串： `'2015-03-01'`，`'2015-03-01 12:01:40'`，`'2015/01/05'`，`'2015-03-01T16:00:00.000Z'`。 196 | 197 | ### cat 198 | 分类类型数据的度量。除了拥有通用的度量属性外，用户还可以设置 values 属性： 199 | 200 | #### `values` 201 | * 类型：Array 202 | * 描述： 203 | > `type` 是 `cat` 和 `timeCat` 时适用。 204 | 205 | 具体的分类的值，一般用于指定具体的顺序和枚举的对应关系，常用于 2 个场景： 206 | 207 | 需要指定分类的顺序时，例如：`type` 字段有`'最大'`、`'最小'`和`'适中'`，我们想指定这些数值在坐标轴或者图例上的显示顺序时： 208 | 209 | ```js 210 | const scale = { 211 | 'c': { 212 | type: 'cat', 213 | values: [ '最小','适中','最大' ] 214 | } 215 | }; 216 | 217 | ``` 218 | ### timeCat 219 | timeCat 度量对应时间数据，但是不是连续的时间类型，而是有序的分类数据。例如股票交易的日期，此时如果使用 time 类型，那么由于节假日没有数据，折线图、k 线图就会发生断裂，所以此时需要使用 timeCat 类型度量将日期转换为有序的分类数据，该度量默认会对数据做排序。 220 | 221 | 222 | timeCat 是 cat 度量的子类，除了支持所有通用的属性和 cat 度量的属性外也有自己的属性: 223 | 224 | #### `mask` 225 | * 类型：string 226 | * 描述：时间显示格式. 227 | * 默认值：`'YYYY-MM-DD HH:mm:ss` 228 | 229 | 230 | 数据的格式化格式。 231 | 232 | > 说明：mask 的占位符标准同 [moment](https://momentjs.com/docs/#/displaying/format/)、[fecha](https://github.com/taylorhakes/fecha); 233 | 234 | timeCat 和 time 类型度量的差别和应用场景 235 | > timeCat 是分类类型的度量，所以适合于显示柱状图或者固定时间内没有数据的场景（股票图） 236 | > time 是连续类型的度量，更适合显示折线图、面积图，表现数据的趋势 237 | -------------------------------------------------------------------------------- /bizCharts/zh/api/shape.md: -------------------------------------------------------------------------------- 1 | # Shape 2 | 3 | 在 `` 中指定几何图形时，可以使用[内置的 shape](../docs/chartType#图表类型和几何标记)，也可以通过 `Shape` 来自定义 shape。 4 | 5 | ## 自定义语法 6 | 7 | 自定义 `shape` 的使用如下： 8 | 9 | ```js 10 | import { Shape } from 'bizcharts'; 11 | //往 interval 几何标记对象（决定了图表类型，即柱状图、饼图等）上注册名字为 shapeName 的 Shape 12 | const shapeObj = Shape.registerShape(geomName, 'shapeName', { 13 | getPoints: function(pointInfo) { 14 | // 获取 shape 绘制的关键点 15 | }, 16 | draw: function(cfg, container) { 17 | // 自定义最终绘制的逻辑 18 | } 19 | }); 20 | 21 | ReactDOM.render( , container); 22 | ``` 23 | 24 | 参数详解： 25 | - geomName 几何标记名, 如 point, line 等 26 | - shapeName 注册的具体图形名，自定义的图形的名称 27 | - getPoints 自定义形状绘制时需要的节点，比如柱状图需要 4 个节点 28 | - draw 执行图形绘制逻辑、调用绘图引擎 29 | 30 | 31 | ## 自定义语法配置 32 | 33 | ### getPoints 34 | 35 | 计算绘制 shape 的关键点，每个几何形状都是由特定的几个关键点通过线连接而成。 36 | 37 | #### 参数 38 | 39 | - `pointInfo` **Object** 40 | pointInfo 数据结构如下，所有的数值都是归一化后的结果（即 0 至 1 范围内的数据） 41 | 42 | ```js 43 | { 44 | size: 0.1, // 形状的尺寸，不同的 shape 该含义不同，0 - 1 范围的数据 45 | x: 0.2, // 该点归一化后的 x 坐标 46 | y: 0.13, // 该点归一化后的 y 坐标 47 | y0: 0.1 // 整个数据集 y 轴对应数据的最小值，也是归一化后的数据，注意如果 y 对应的源数据是数组则 y 也将是个数组 48 | } 49 | ``` 50 | 51 | #### 返回值 52 | 53 | 返回包含绘制关键点的数组，即 `Array<{x: number, y: number}>`。 54 | 55 | 下表列出了 G2 各个 geom 几何形状的关键点形成机制： 56 | 57 | geom 类型 | 解释 58 | ---- | ---- 59 | point | 点的绘制很简单，只要获取它的坐标以及大小即可，其中的 `size` 属性代表的是点的半径。
![image](https://zos.alipayobjects.com/skylark/940c75cf-8400-415a-9e2d-040ce46e6a03/attach/3378/269e0e2c77a555a5/image.png) 60 | line | 线是由无数个点组成，在 G2 中我们将参与绘制的各个数据转换成坐标上的点然后通过线将逐个点连接而成形成线图，其中的 `size` 属性代表的是线的粗细。
![image](https://zos.alipayobjects.com/skylark/f9b84b83-1cc8-4b81-9319-f643ef0e280a/attach/3378/d49e02be2f48a136/image.png) 61 | area | area 面是在 line 线的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充。
![image](https://zos.alipayobjects.com/skylark/dbcd60f3-7662-4ebd-8e0e-85d7d754d0c7/attach/3378/f67277978d5d8e3e/image.png) 62 | interval | interval 默认的图形形状是矩形，而矩形实际是由四个点组成的，在 G2 中我们根据 `pointInfo` 中的 `x`、`y`、`size` 以及 `y0` 这四个值来计算出这四个点，然后**顺时针**连接而成。
![image](https://zos.alipayobjects.com/skylark/f36a2e27-13e8-4d55-8c93-b698e15bcc1f/attach/3378/94a6515e2eb60265/image.png) 63 | polygon | polygon 多边形也是由多个点连接而成，在 `pointInfo` 中 `x` 和 `y` 都是数组结构。
![image](https://zos.alipayobjects.com/skylark/b4f6981c-ccd3-4237-97bd-dd88950758ea/attach/3378/ed2b5c05a1ff3581/image.png) 64 | schema | schema 作为一种自定义的几何图形，在 G2 中默认提供了 `box` 和 `candle` 两种 shape，分别用于绘制箱型图和股票图，注意这两种形状的矩形部分四个点的连接顺序都是顺时针，并且起始点均为左下角，这样就可以无缝转换至极坐标。
![image](https://zos.alipayobjects.com/skylark/340c229d-be30-4f98-8a2a-8d55c8422645/attach/3378/1bfed6f3f5f90e13/image.png)![image](https://zos.alipayobjects.com/skylark/8afa13da-95d1-4282-a08b-f1c421b0d972/attach/3378/d82c45d3a526bd80/image.png) 65 | edge | edge 边同 line 线一致，区别就是 edge 是一个线段，连接边的两个端点即可。 66 | 67 | ### draw 68 | 69 | `getPoints` 用于计算绘制 shape 的关键点，那么 `draw` 方法就是用来定义如何连接这些关键点的。 70 | 71 | #### 参数 72 | 73 | - `cfg` **object** 74 | 75 | 该参数包含经过图形映射后的所有数据以及该数据对应的原始数据，结构如下图所示： 76 | 77 | ![image](https://zos.alipayobjects.com/skylark/505c6cb1-fde7-4714-98b6-43cb77099f19/attach/3378/332f7e3e64bc48f5/image.png) 78 | 79 | 原始数据存储于 `cfg.origin._origin` 中，通过 `getPoints` 计算出的图形关键点都储存于 `points` 中。而 `cfg` 对象中的 `color`、`size`、`shape` 都是通过映射之后的图形属性数据，可以直接使用。 80 | 81 | - `container` **G2.G.Group** 82 | 83 | 图形容器，需要将自定义的 shape 加入该容器中才能最终渲染出来。 84 | 85 | #### 返回值 86 | 87 | 返回创建好的 shape，即 `container.add(geomType, shapAttrs)` 的返回值。 88 | 89 | ## Shape 方法 90 | 91 | 自定义 shape 时，可使用内置的工具方法来快速将归一化后的数据转换为画布上的坐标，如下面示例使用了 `parsePath` 方法： 92 | 93 | ```js 94 | Shape.registerShape('interval', 'rect', { 95 | getPoints(pointInfo) { 96 | // ... 97 | }, 98 | draw(cfg, container) { 99 | // ... 100 | path = this.parsePath(path); 101 | // ... 102 | } 103 | }); 104 | ``` 105 | 106 | ### parsePoint 107 | 108 | 说明：将 0 - 1 范围内的点转化为画布上的实际坐标。 109 | 110 | #### 参数 111 | 112 | - `point` **{x: number, y: number}** 113 | 114 | 如： 115 | 116 | ```js 117 | { 118 | x: 0.3, 119 | y: 0.34 120 | } 121 | ``` 122 | 123 | #### 返回值 124 | 125 | 返回画布上的坐标，数据结构同参数 `point`。 126 | 127 | ### parsePoints 128 | 129 | 说明：将一组 0 - 1 范围内的点转化为画布上的实际坐标。 130 | 131 | #### 参数 132 | 133 | - `points` **Array<{x: number, y: number}>** 134 | 135 | `point` 的数组，表示一组归一后的坐标。 136 | 137 | 如： 138 | 139 | ```js 140 | [ 141 | { x: 0.3, y: 0.34 }, 142 | { x: 0.3, y: 0.34 } 143 | ] 144 | ``` 145 | 146 | #### 返回值 147 | 148 | 返回对应的画布上的坐标点数组，数据结构同 `points`。 149 | 150 | ### parsePath 151 | 152 | 将归一化的 path 转为基于画布坐标的 path. 153 | 154 | #### 参数 155 | 156 | - `path` **Path** 157 | 158 | 连接各个关键的路径，例如：`[[ 'M', 0, 0 ], [ 'L', 1, 1 ]]`。 159 | 160 | - `isCircle` **boolean** 161 | 162 | 是否是极坐标。如果是极坐标，则把 path 转换为圆弧。 163 | 164 | #### 返回值 **Path** 165 | 166 | 返回基于画布坐标的 path。 167 | 168 | ## 代码示例 169 | 170 | 下面通过一个例子来加深下理解。 171 | 172 |

173 | 174 | ```js 175 | import { Chart, Axis, Geom, Tooltip, Shape } from 'bizcharts'; 176 | // 如果是 umd 引入，可使用下面的方式 177 | // const { Chart, Axis, Geom, Tooltip, Shape } = window.BizCharts; 178 | 179 | Shape.registerShape('interval', 'triangle', { 180 | getPoints(cfg) { 181 | const x = cfg.x; 182 | const y = cfg.y; 183 | const y0 = cfg.y0; 184 | const width = cfg.size; 185 | return [ 186 | { x: x - width / 2, y: y0 }, 187 | { x: x, y: y }, 188 | { x: x + width / 2, y: y0 } 189 | ] 190 | }, 191 | draw(cfg, container) { 192 | const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标 193 | const polygon = container.addShape('polygon', { 194 | attrs: { 195 | points: [ 196 | [ points[0].x, points[0].y ], 197 | [ points[1].x, points[1].y ], 198 | [ points[2].x, points[2].y ] 199 | ], 200 | fill: cfg.color 201 | } 202 | }); 203 | return polygon; // 将自定义Shape返回 204 | } 205 | }); 206 | 207 | const data = [ 208 | { genre: 'Sports', sold: 275 }, 209 | { genre: 'Strategy', sold: 115 }, 210 | { genre: 'Action', sold: 120 }, 211 | { genre: 'Shooter', sold: 350 }, 212 | { genre: 'Other', sold: 150 } 213 | ]; 214 | 215 | ReactDOM.render(( 216 |

217 | 218 | 219 | 220 | 221 | 222 | 223 |

224 | ), document.getElementById("mountNode")); 225 | ``` 226 | 227 | ![custom shape](https://img.alicdn.com/tfs/TB1INKnzrSYBuNjSspfXXcZCpXa-1458-692.png) 228 | -------------------------------------------------------------------------------- /bizCharts/zh/docs/dataset.md: -------------------------------------------------------------------------------- 1 | 2 | # DataSet Package 3 | 4 | 自BizChars 3.0版本开始，原先内置的数据处理模块frame从BizChars包中抽离出来，独立成为DataSet包。DataSet的目标是为数据可视化场景提供状态驱动（state driven）的、丰富而强大的数据处理能力。 5 | BizCharts 对数据的支持跟G2一致，通用支持独立的 DataSet 包。 6 | 7 | ## 术语表 8 | 9 | | 术语 | 英文 | 描述 | 10 | | -------- | -------- | -------- | 11 | | 数据集 | DataSet | 一组数据集合 | 12 | | 数据视图 | DataView | 单个数据视图，目前有普通二维数据（类似一张数据库表）、树形数据、图数据和地理信息数据几种类型 | 13 | | 状态量 | state | 数据集内部流转的控制数据状态的变量 | 14 | | 变换 | Transform | 数据变换函数，数据视图做数据处理时使用，包括图布局、数据补全、数据过滤等等 | 15 | | 连接器 | Connector | 数据接入函数，用于把某种数据源（譬如csv）载入到某个数据视图上 | 16 | 17 | ## 简介 18 | 19 | 在 BizChars 的 1.x 和 2.x 版本里，统计函数和数据处理是和图形语法混合在一起的。这一方面导致了不必要的隐喻，造成额外的理解成本，另一方面把数据处理模块（ Frame 和 Stat ）内置也限制了 BizChars 数据处理能力的进一步发展。 20 | 21 | 为追求更极致的体验，我们把数据处理部分从 BizChars 中完全抽离出来，对数据处理本身进行了进一步的抽象，扩展和优化，从而实现了一个独立的数据处理模块 DataSet。 22 | 23 | 首先我们把数据处理分为两个大的步骤：数据连接（Connector）和数据转换（Transform）。Connector 负责导入和归一化数据（譬如导入 CSV 数据，导入 GeoJSON 数据等），Transform 负责进行各种数据转换操作（譬如图布局、数据统计、数据补全等）。通过这样的分层，支持了前端社区非常全面的数据处理相关的算法和模块；其次，我们在单个数据视图（DataView）的基础上增加了数据集（DataSet）的概念，通过统一的 DataSet 管理，实现了各个数据视图之间的状态同步和交互。整个数据处理模块的架构如下图。 24 | 25 | ![data-set structure](https://img.alicdn.com/tfs/TB1pjlYcf6H8KJjy0FjXXaXepXa-1186-655.png) 26 | 27 | ## 安装 28 | 29 | ### 浏览器引入 30 | 31 | 可以通过` 36 | ``` 37 | 38 | ```html 39 | 40 | 41 | ``` 42 | 43 | 这样，就可以在后续脚本中得到全局变量 DataSet。 44 | 45 | ```html 46 | 47 | 50 | ``` 51 | 52 | ### 通过 npm 安装 53 | 54 |

55 | 56 | 我们提供了 DataSet 的 npm 包，可以通过下面的命令进行安装。 57 | 58 | ```bash 59 | npm install @antv/data-set --save 60 | ``` 61 | 62 | 安装后即可使用 `import` 或者 `require` 进行引用。 63 | 64 | ```js 65 | import { View } from '@antv/data-set'; 66 | const dv = new View(); 67 | ``` 68 | 69 | ## api文档 70 | DataSet 主要完成了以下功能： 71 | *源数据的解析，将csv, dsv,geojson 转成标准的JSON 72 | *加工数据，包括 filter,map,fold(补数据) 等操作 73 | *统计函数，汇总统计、百分比、封箱等统计函数 74 | *特殊数据处理，包括地理数据、矩形树图、桑基图、文字云的数据处理 75 | 具体参见[dataset api 文档](../api/dataset) 76 | 77 | ## 使用示例 78 | 79 | ### 单独使用 DataView 80 | 如果仅仅是对数据进行加工，不需要图表联动 81 | 82 | ### 状态量 83 | 在G2 3.0 中使用 DataSet 的状态量(State) 可以很容易的实现图表的联动，步骤如下： 84 | 1.创建 DataSet 对象，指定状态量 85 | 2.创建 DataView 对象，在 transform 中使用状态量 86 | 3.创建图表，引用前面创建 DataView 87 | 4.改变状态量，所有 DataView 更新 88 | 89 | ```js 90 | // step1 创建 dataset 指定状态量 91 | const ds = new DataSet({ 92 | state: { 93 | year: '2010' 94 | } 95 | }); 96 | 97 | // step2 创建 DataView 98 | const dv = ds.createView().source(data); 99 | 100 | dv.transform({ 101 | type: 'filter', 102 | callback(row) { 103 | return row.year === ds.state.year; 104 | } 105 | }); 106 | 107 | 108 | // step3 引用 DataView 109 | 110 | 111 | 112 | // step4 更新状态量 113 | ds.setState('year', '2012'); 114 | ``` 115 | 116 | #### 注意： 117 | * 在 DataSet 创建了状态量后，默认会影响其管理的所有的 DataView，可以通过 watchingStates 明确的指定受那些状态量影响，设置为空数组时不受状态量的影响。 118 | * 所有引用了 DataSet 管理的 DataView 的图表都会受自动刷新，不需要手工刷新。 119 | 120 | ### 图表联动示例 121 | 122 | 假设我们有一个 CSV 文件 `population-by-age.csv`，里面的数据是美国各个州不同年龄段的人口数量，文件内容如下： 123 | 124 | | State | 小于5岁 | 5至13岁 | 14至17岁 | 18至24岁 | 25至44岁 | 45至64岁 | 65岁及以上 | 125 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | 126 | | WY | 38253 | 60890 | 29314 | 53980 | 137338 | 147279 | 65614 | 127 | | DC | 36352 | 50439 | 25225 | 75569 | 193557 | 140043 | 70648 | 128 | | VT | 32635 | 62538 | 33757 | 61679 | 155419 | 188593 | 86649 | 129 | | ND | 41896 | 67358 | 33794 | 82629 | 154913 | 166615 | 94276 | 130 | | AK | 52083 | 85640 | 42153 | 74257 | 198724 | 183159 | 50277 | 131 | | SD | 58566 | 94438 | 45305 | 82869 | 196738 | 210178 | 116100 | 132 | | ... | ... | ... | ... | ... | ... | ... | ... | 133 | 134 | 我们希望把 CSV 文件的内容载入，画一个以州为横轴，人口数量为纵轴的层叠柱状图，并且在查看某个柱子的时候，希望能看到对应某个州的对比各个年龄段人口数量的饼图。下面我们来看看应该怎么画？ 135 | 136 | > Step1：创建数据集 DataSet 实例，管理 state 状态量 137 | 138 | ```js 139 | const ds = new DataSet({ 140 | state: { 141 | currentState: 'WY' 142 | } 143 | }); 144 | ``` 145 | 146 | > Step2：为层叠柱状图创建数据视图 View 实例，装载数据 147 | 148 | ```js 149 | /* 150 | * 如果不需要用到状态管理之类的功能，也可以不基于 DataSet 实例创建数据视图 151 | * 直接用 const dv = new DataSet.View(); 152 | * 本例需要用状态量在不同的数据视图实例之间通信，所以需要有一个 DataSet 实例管理状态量 153 | */ 154 | $.getJSON('/BizCharts/public/data/population-by-age.csv', data => { 155 | const dvForAll = ds 156 | .createView('populationByAge') // 在 DataSet 实例下创建名为 populationByAge 的数据视图 157 | .source(data, { 158 | type: 'csv', // 使用 CSV 类型的 Connector 装载 data 159 | }); 160 | }); 161 | ``` 162 | 163 | > Step3：合并人口数量列（新增"年龄段"和"人口"字段，把各个年龄段的人口数量列数据合并到这两列上） 164 | 165 | ```js 166 | dvForAll.transform({ 167 | type: 'fold', 168 | fields: [ '小于5岁','5至13岁','14至17岁','18至24岁','25至44岁','45至64岁','65岁及以上' ], 169 | key: 'age', 170 | value: 'population' 171 | }); 172 | ``` 173 | 174 | > Step4：为饼图创建数据视图实例，继承上一个数据视图的数据，通过状态量 currentState 过滤数据、统计不同年龄段人口占比 175 | 176 | ```js 177 | { 182 | const items = evt.items || []; 183 | if (items[0]) { 184 | ds.setState('currentState', items[0].title); 185 | } 186 | } 187 | } 188 | > 189 | 190 | { 192 | return val / 1000000 + 'M'; 193 | } 194 | }}> 195 | 207 | 208 | 214 | 215 | 220 | { 221 | percent = (percent * 100).toFixed(2) + '%'; 222 | return age + ' ' + percent; 223 | }]} /> 224 | 225 | 226 | ``` 227 | 详情信息请[点击这里](https:///BizCharts/demo-detail.html?code=demo/other/bar-change-pie) 228 | 229 | **注意：** 数据源路径为`/BizCharts/public/data/population-by-age.json` 230 | -------------------------------------------------------------------------------- /bizGoblin/zh/api/legend.md: -------------------------------------------------------------------------------- 1 | 2 | # Legend 3 | 4 | 图例的生成是由图形语法中的图形属性决定的，我们会根据图形属性映射以及数据的类型自动生成不同类型的图例： color, size 这三个图形属性如果判断接收的参数是数据源的字段时，会自动生成不同的图例： 5 | 6 | * color, 会赋予不同的图例项不同的颜色来区分图形 7 | * size, 在图例上显示图形的大小（**暂未支持**） 8 | 9 | ## 使用说明 10 | 11 | ### 父组件 12 | - [``](./chart.md) 13 | 14 | ### 子组件 15 | - none 16 | 17 | **BizGoblin 默认情况下，展示图例，当且仅当``时图表才隐藏legend**，如下所示： 18 | 19 | ```js 20 | 21 | // 关闭图表legend功能 22 | 23 | 24 | ``` 25 | 26 | ## API 27 | 28 | #### `dataKey` 29 | * 类型：String 30 | * 描述：当前图例对应数据源中的字段名 31 | ```js 32 | 33 | ``` 34 | 35 | #### `show` 36 | * 类型：boolean 37 | * 描述：不显示所有的图例，或者不显示 dataKey 字段对应的图例，默认值true。 38 | ```js 39 | // 不显示 bar 字段对应的图例 40 | 41 | 42 | // 不显示所有的图例 43 | 44 | ``` 45 | 46 | #### `position` 47 | * 类型：String 48 | * 描述：设置图例的显示位置，可设置的值为：`top`、`bottom`、`left`、`right`，默认为 `top`。 49 | 50 | #### `align` 51 | * 类型：String 52 | * 描述：当 `position` 为 `top`、`bottom` 时生效，用于设置水平方向上图例的对齐方式，可设置的值为： `left`、`center`、`right` ，默认为 `left` ，左对齐。 53 | 54 | #### `verticalAlign` 55 | * 类型：String 56 | * 描述：当 `position` 为 `left`、`right` 时生效，用于设置垂直方向上图例的对齐方式，可设置的值为：`top` `middle` `bottom`，默认为 `middle`，居中对齐。 57 | 58 | #### `itemWidth` 59 | * 类型：Number | 'auto' 60 | * 描述：用于设置每个图例项的宽度，默认为 'auto'。 61 | 62 | #### `showTitle` 63 | * 类型：Boolean 64 | * 描述：是否显示图例标题，默认值为 false，即不展示。 65 | 66 | #### `titleStyle` 67 | * 类型：Object 68 | * 描述：图例标题的显示样式设置 69 | ```js 70 | titleStyle: { 71 | textAlign: 'center', // 文本对齐方向，可取值为： start middle end 72 | fill: '#404040', // 文本的颜色 73 | fontSize: 12, // 文本大小 74 | fontWeight: 'bold', // 文本粗细 75 | textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle 76 | } 77 | ``` 78 | 79 | #### `offsetX` 80 | * 类型：Number 81 | * 描述：图例 x 方向的整体偏移值，数值类型，数值单位为 `px`，默认值为 0。 82 | 83 | #### `offsetY` 84 | * 类型：Number 85 | * 描述：图例 Y 方向的整体偏移值，数值类型，数值单位为 `px`，默认值为 0。 86 | 87 | #### `titleGap` 88 | * 类型：Number 89 | * 描述：标题距离图例项的间距，默认为 12px，如果不展示标题，不生效。 90 | 91 | #### `itemGap` 92 | * 类型：Number 93 | * 描述：每个图例项水平方向上的间距，默认值为 12px。 94 | 95 | #### `itemMarginBottom` 96 | * 类型：Number 97 | * 描述：每个图例项下方留白间距，默认值为 12px。 98 | 99 | #### `wordSpace` 100 | * 类型：Number 101 | * 描述：marker 和文本之间的间距，默认值为 6px。 102 | 103 | #### `unCheckColor` 104 | * 类型：String 105 | * 描述：用于取消选中的图例 marker 以及文本的颜色。 106 | 107 | #### `itemFormatter` 108 | * 类型：Function 109 | * 描述：回调函数，用于格式化图例每项的文本显示。 110 | ```js 111 | itemFormatter(val) { 112 | return val; // val 为每个图例项的文本值 113 | } 114 | ``` 115 | 116 | #### `marker` 117 | * 类型：String | Function | Object 118 | * 描述：用于设置图例的 marker 样式，默认为 circle 即圆形。 119 | 1. String 类型 120 | 当为 String 类型时，即表示使用底层踢动的类型，支持类型如下： 121 | 122 | | marker 类型 | 样式 | 123 | |------------|--------| 124 | | 'cycle' |

| 125 | | 'square' |

| 126 | 127 | 2. Object 类型 128 | marker 为 Object 时，可以配置 symbol、radius 以及一些绘图属性。 129 | ```js 130 | marker: { 131 | symbol: 'circle', // marker 的形状 132 | radius: 5 // 半径大小 133 | } 134 | ``` 135 | 3. Function 类型 136 | 用于自定义 shape，使用方式如下， 137 | ```js 138 | /** 139 | * 自定义 marker 形状 140 | * @param {number} x 该 marker 的横轴坐标 141 | * @param {number} y 该 marker 的纵轴坐标 142 | * @param {number} r 该 marker 的半径大小 143 | * @param {object} ctx canvas 的上下文对象 144 | * @return {null} 145 | */ 146 | marker(x, y, r, ctx) {} 147 | ``` 148 | 以下代码绘制了如图所示的 marker：

149 | 150 | ```js 151 | chart.legend('city', { 152 | marker(x, y, r, ctx) { 153 | ctx.lineWidth = 2; 154 | ctx.strokeStyle = ctx.fillStyle; 155 | ctx.moveTo(x - r - 3, y); 156 | ctx.lineTo(x + r + 3, y); 157 | ctx.stroke(); 158 | ctx.arc(x, y, r - 1, 0, Math.PI * 2, false); 159 | ctx.fill(); 160 | } 161 | }); 162 | ``` 163 | 164 | #### `nameStyle` 165 | * 类型：Object 166 | * 描述：用于设置图例项的文本样式，详见[绘图属性](https://antv.alipay.com/zh-cn/f2/3.x/api/canvas.html)。 167 |

168 | ```js 169 | nameStyle: { 170 | textAlign: 'center', // 文本对齐方向，可取值为： start middle end 171 | fill: '#404040', // 文本的颜色 172 | fontSize: '12', // 文本大小 173 | fontWeight: 'bold', // 文本粗细 174 | textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle 175 | } 176 | ``` 177 | 178 | #### `valueStyle` 179 | * 类型：Object 180 | * 描述：用于设置图例项的文本样式，详见[绘图属性](https://antv.alipay.com/zh-cn/f2/3.x/api/canvas.html)。 181 |

182 | ```js 183 | valueStyle: { 184 | textAlign: 'center', // 文本对齐方向，可取值为： start middle end 185 | fill: '#404040', // 文本的颜色 186 | fontSize: '12', // 文本大小 187 | fontWeight: 'bold', // 文本粗细 188 | textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle 189 | } 190 | ``` 191 | #### `triggerOn` 192 | * 类型：String|Function 193 | * 描述：图例筛选行为的触发事件，默认为 `click`。 194 | 1. String 类型 195 | 自定义别的事件类型 196 | 2. Function 类型 197 | 当不处于 html5 环境时，用于方便用户自己去绑定事件。 198 | ```js 199 | /** 200 | * 用户自己去绑定或者解绑事件 201 | * @param {Function} method 该事件的处理函数 202 | * @param {String} type 'bind' 表示绑定 'unbind' 表示解绑 203 | triggerOn(method, type) { 204 | // user's code 205 | } 206 | ``` 207 | 208 | #### `clickable` 209 | * 类型：Boolean 210 | * 描述：设置图例项是否允许点击，默认为 true，即允许点击。 211 | 212 | #### `onClick` 213 | * 类型：Function 214 | * 描述：用于自定义鼠标点击图例项的交互，当 `clickable` 为 `false` 不生效。 215 | ```js 216 | /** 217 | * 自定义图例项点击事件， clickable 为 false 不生效 218 | * @param {object} ev 事件对象 219 | * @return {null} 220 | */ 221 | onClick: ev => {} 222 | ``` 223 | 224 | #### `custom` 225 | * 类型：Boolean 226 | * 描述：默认为 `false`，当 `custom` 为 `true`，表示不使用默认生成的图例，允许用户自定义图例，包括具体的图例项以及 click 交互。 227 | 228 | 自定义图例时需要用户自己声明具体的图例项 `items` (该属性是一个对象数组，数组中每一项为一个对象类型，结构为：`{ value: '', marker:{fill: 'red'}}`)以及图例项的 `onClick` 事件。 229 | 230 | `marker` 的格式可以为数组或者字符串。 231 | ```js 232 | chart.legend({ custom: true, items: [], onClick(){} }); 233 | chart.legend('field', { custom: true, items: [], onClick(){} }); 234 | ``` 235 | 236 | 具体使用如下： 237 | ```js 238 | chart.legend('city', { 239 | custom: true, 240 | position: 'left', 241 | items: [ 242 | { value: 'a1', marker: 'triangle', fill: 'red'}, 243 | { value: 'a2', marker: 'triangle', fill: 'blue'}, 244 | { value: 'a3', marker: 'triangle', fill: 'green'} 245 | ] 246 | }); 247 | chart.legend('city', { 248 | custom: true, 249 | position: 'left', 250 | items: [ 251 | { value: 'a1', marker: { symbol: 'triangle', stroke: 'red', radius: 8 }}, 252 | { value: 'a2', marker: { symbol: 'triangle', stroke: 'green', radius: 8 }}, 253 | { value: 'a3', marker: { symbol: 'triangle', stroke: 'blue', radius: 8 }} 254 | ] 255 | }); 256 | chart.legend({ 257 | custom: true, 258 | position: 'left', 259 | items: [ 260 | { value: 'a1', marker: 'triangle', fill: 'red'}, 261 | { value: 'a2', marker: 'triangle', fill: 'blue'}, 262 | { value: 'a3', marker: 'triangle', fill: 'green'} 263 | ] 264 | }); 265 | ``` 266 | -------------------------------------------------------------------------------- /bizGoblin/zh/api/guide.md: -------------------------------------------------------------------------------- 1 | 2 | # Guide 3 | 用于绘制图表的辅助元素。 4 | 5 | ## 使用说明 6 | ### 父组件 7 | - [``](./chart.md) 8 | 9 | ### 子组件 10 | - none 11 | 12 | 支持六种类型的辅助元素 13 | - Line 辅助线，例如表示平均值或者预期分布的直线。[参见Line](#line) 14 | - Text 辅助文本，指定位置添加文本说明。[参见Text](#text) 15 | - Tag 绘制辅助 Tag。[参见Tag](#tag) 16 | - Rect 辅助框，框选一段图区，设置背景、边框等。[参见Rect](#rect) 17 | - Html 辅助 html，指定位置添加自定义 html，显示自定义信息。[参见Html](#html) 18 | - Arc 辅助圆弧，只适用于极坐标。[参见Arc](#arc) 19 | 20 | - 不同辅助标记组件所支持的配置属性也不一样，主要差异为坐标位置属性差异: 21 | - Text, Html, Tag 中使用 position 22 | - Line, Rect, Arc 中使用 start、end 字段 23 | 24 | ## API 25 | 26 | #### `type` 27 | * 类型： String 28 | * 描述：指定辅助元素的类型，可设置的值为 `line`、`text`、`rect`、`tag`、`html`、`arc`。 29 | 30 | ### Line 31 | 32 | ```js 33 | 44 | ``` 45 | 46 | #### `top` 47 | * 类型：Boolean 48 | * 描述：指定 guide 是否绘制在 canvas 最上层，默认为 true, 即绘制在最上层。 49 | 50 | #### `start` 51 | * 类型： Function | Array 52 | * 描述：指定辅助线的起始位置，该值的类型如下： 53 | 54 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 55 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 56 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 57 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 58 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 59 | 60 | #### `end` 61 | * 类型：Function | Array 62 | * 描述：指定辅助线的结束位置，使用同 start。 63 | 64 | #### `style` 65 | * 类型：Object 66 | * 描述：辅助线样式配置。 67 | 68 | ### Text 69 | 70 | ```js 71 | 85 | ``` 86 | 87 | #### `top` 88 | * 类型：Boolean 89 | * 描述：指定 giude 是否绘制在 canvas 最上层。默认值: `true` , 即绘制在最上层。 90 | 91 | #### `position` 92 | * 类型：Function | Array 93 | * 描述：指定辅助文本的显示位置，该值的类型如下： 94 | 95 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 96 | 97 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 98 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 99 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%'] 使得辅助元素居中 100 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 101 | 102 | #### `content` 103 | * 类型：String 104 | * 描述：辅助文本的显示内容。 105 | 106 | #### `style` 107 | * 类型：Object 108 | * 描述：用于设置辅助文本的显示样式。 109 | 110 | #### `offsetX` 111 | * 类型：Number 112 | * 描述：x 方向的偏移量。 113 | 114 | #### `offsetY` 115 | * 类型：Number 116 | * 描述：y 方向的偏移量。 117 | 118 | ### Tag 119 | 120 | ```js 121 | 147 | ``` 148 | 149 | #### `top` 150 | * 类型：Boolean 151 | * 描述：指定 giude 是否绘制在 canvas 最上层。默认为 `true` , 即绘制在最上层。 152 | 153 | #### `position` 154 | * 类型：Function | Array 155 | * 描述：指定辅助Tag的显示位置，该值的类型如下： 156 | 157 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 158 | 159 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 160 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 161 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%'] 使得辅助元素居中 162 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 163 | 164 | #### `content` 165 | * 类型：String 166 | * 描述：辅助Tag的显示内容。 167 | 168 | #### `direct` 169 | * 类型：String 170 | * 描述：用于设置辅助Tag的箭头朝向，默认自动计算，也可以手动指定方向，`tl`、`tc`、`tr`、`cl`、`cr`、`bl`、`bc`、`br`。 171 | 172 | #### `size` 173 | * 类型：Number 174 | * 描述：设置辅助Tag箭头的三角标的边长，默认为 `4` 175 | 176 | #### `offsetX` 177 | * 类型：Number 178 | * 描述：x 方向的偏移量。 179 | 180 | #### `offsetY` 181 | * 类型：Number 182 | * 描述：y 方向的偏移量。 183 | 184 | #### `background` 185 | * 类型：Object 186 | * 描述：辅助Tag的背景样式 187 | 188 | #### `textStyle` 189 | * 类型：Object 190 | * 描述：辅助Tag的文本样式 191 | 192 | #### `withPoint` 193 | * 类型：Boolean 194 | * 描述：辅助Tag是否带点 195 | 196 | #### `pointStyle` 197 | * 类型：Object 198 | * 描述：辅助Tag的点样式 199 | 200 | ### Rect 201 | 202 | ```js 203 | 215 | ``` 216 | #### `top` 217 | * 类型：Boolean 218 | * 描述：指定 giude 是否绘制在 canvas 最上层。默认值:false, 即绘制在最下层。 219 | 220 | #### `start` 221 | * 类型：Function | Array 222 | * 描述：指定辅助背景框的起始位置，即背景框的左上角，该值的类型如下： 223 | 224 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 225 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 226 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 227 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 228 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 229 | 230 | #### `end` 231 | * 类型：Function | Array 232 | * 描述：指定辅助背景框的结束位置，即背景框的右下角，该属性用法同 start。 233 | 234 | #### `style` 235 | * 类型：Object 236 | * 描述：辅助框图形样式属性。 237 | 238 | ### Html 239 | 240 | ```js 241 | 250 | ``` 251 | 252 | #### `position` 253 | * 类型： Function |Array 254 | * 描述：设置 html 的显示位置，该值的类型如下： 255 | 256 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 257 | 258 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 259 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 260 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 261 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 262 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 263 | 264 | #### `alignX` 265 | * 类型：String 266 | * 描述：html 的水平对齐方式，可取值为： `left` 、 `center` 、 `right` ，默认值为 `center`。 267 | 268 | #### `alignY` 269 | * 类型：String 270 | * 描述：html 的垂直对齐方式，可取值为： `top` 、 `middle` 、 `bottom` ，默认值为 `middle`。 271 | 272 | #### `offsetX` 273 | * 类型：Number 274 | * 描述：x 方向的偏移量。 275 | 276 | #### `offsetY` 277 | * 类型：Number 278 | * 描述：y 方向的偏移量。 279 | 280 | #### `html` 281 | * 类型：String | Function 282 | * 描述：需要显示的 html 内容。 283 | 284 | ### Arc 285 | 286 | ```js 287 | 294 | ``` 295 | 296 | #### `top` 297 | * 类型：Boolean 298 | * 描述：指定 giude 是否绘制在 canvas 最上层。默认值： `false` , 即绘制在最下层。 299 | 300 | #### `start` 301 | * 类型：Function | Array 302 | * 描述：指定辅助圆弧的起始位置，该值的类型如下： 303 | 304 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 305 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 306 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 307 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 308 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 309 | 310 | 311 | #### `end` 312 | * 类型： Function | Array 313 | * 描述：指定辅助圆弧的结束位置，该属性用法同 start。 314 | 315 | #### `style` 316 | * 类型：Object 317 | * 描述：设置圆弧的显示样式。 318 | -------------------------------------------------------------------------------- /bizCharts/zh/api/geom.md: -------------------------------------------------------------------------------- 1 | # Geom 几何标记 2 | 3 | 几何标记对象，决定创建图表的类型，具体的概念介绍请参见。 4 | 5 | 6 | ## 什么是几何标记 7 | 8 | 几何标记指点、线、面这些几何图形。BizCharts 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户通过配置集合标记的类型来配置图表类型，比如折线图和柱状图的组合。 9 | 10 | BizCharts 生成的图表的类型，是由几何标记和坐标系共同决定的。可以通过下图直观得理解什么是几何标记： 11 |

12 | 13 | 14 | ## 几何标记和图表类型 15 | 虽然 BizCharts 没有特定的图表类型概念，**但是仍基本支持所有传统图表类型的绘制**。 16 | 17 | 下表展示了 BizCharts 中的 geom 几何标记类型和传统图表的对应关系，更多的图表详见 BizCharts 官网的 [demo](../demo)。 18 | 19 | geom 类型| 图表类型 | 备注 20 | -------- | -------- | -------- 21 | point| 点图、折线图中的点| 点的形状有很多，也可以使用图片代表点[气泡图](../demo/detail?id=point-bubble&selectedKey=点图)，同时点也可以在不同坐标系下显示，所以可以扩展出非常多的图表类型。 22 | path| [路径图](../demo/detail?id=other-path&selectedKey=其他图表)，地图上的路径 | 路径图是无序的线图。 23 | line| 折线图、曲线图、[阶梯线图](../demo/detail?id=line-step-series&selectedKey=折线图)| 在极坐标系下可以转换成雷达图。 24 | area| 区域图（面积图）、层叠区域图、[区间区域图](../demo#面积图)|极坐标系下可用于绘制雷达区域图。 25 | interval| 柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图等| 通过坐标系的转置、变化，可以生成各种常见的图表类型；所有的图表都可以进行层叠、分组。 26 | polygon|[色块图（像素图）](../demo/detail?id=heatmap-image&selectedKey=热力图)、[热力图](../demo#热力图)、地图| 多个点可以构成多边形。 27 | schema| k 线图，箱型图 | 自定义的图表类型。 28 | edge| 树图、流程图、关系图 | 与点一起构建关系图。 29 | heatmap| 热力图 | -- 30 | 31 | ## 父组件 32 | [``](chart) [``](view) 33 | 34 | ## 子组件 35 | [``](label) 36 | 37 | ## API 38 | > 更多[图形属性](graphic) 39 | 40 | 41 | #### `type` 42 | * 类型：String 43 | * 描述：几何标记类型，目前 BizCharts 支持的几何标记类型如下： 44 | 45 | type | 说明 46 | --- | --- 47 | `point` | 点，用于点图的构建。 48 | `path` | 路径，无序的点连接而成的一条线。 49 | `line` | 线，点按照 x 轴连接成一条线，构成线图。 50 | `area` | 填充线图跟坐标系之间构成区域图，也可以指定上下范围。 51 | `interval` | 使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。 52 | `polygon` | 多边形，可以用于构建热力图、地图等图表类型。 53 | `schema` | k线图，箱型图。 54 | `edge` | 树图、流程图、关系图。 55 | `heatmap` | 热力图。 56 | 57 | 同时 BizCharts 默认提供了如下 9 种几何标记和[数据调整](geom#adjust)的组合类型。 58 | 59 | type | 描述|数据类型 60 | --- | --- | --- 61 | `pointStack` | 层叠点图|linear| 62 | `pointJitter` | 扰动点图|linear| 63 | `pointDodge` | 分组点图|dodge is not support linear attribute, please use category attribute!| 64 | `intervalStack` | 层叠柱状图|linear| 65 | `intervalDodge` | 分组柱状图|linear| 66 | `intervalSymmetric` | 对称柱状图|linear| 67 | `areaStack` | 层叠区域图|linear| 68 | `lineStack`|层叠折线图|linear| 69 | `schemaDodge` | 分组箱型图|dodge is not support linear attribute, please use category attribute!| 70 | 71 | 72 | #### `adjust` 73 | * 类型：Object 74 | * 描述：声明几何标记对象的数据调整方式，可用于绘制层叠图、扰动图、分组图等。支持单一的数据调整方式也支持各种数据调整方式的组合。 75 | 支持的调整类型包括： 'stack', 'dodge', 'jitter', 'symmetric'。 76 | 77 | ```js 78 | 92 | ``` 93 | 94 | 95 | 96 | #### `position` 97 | * 类型：String 98 | * 描述：位置属性的映射；用于确定由数据中的哪几个字段来确定数据在平面坐标系的位置。通俗地解释，即确定 x 轴和 y 轴的数据字段。它是唯一一个可以用于编码分类又可用于编码定序或者定量的数据属性。 99 | 100 | ```js 101 | 102 | 103 | ``` 104 | 使用 `*` 连接，position 属性会对多个字段进行数据的映射，如：cut*price，x*y 等，用于二维坐标系图表的绘制。 105 | 106 | 以 chart.point().position('x*y') 为例，point 代表图形，即最后需要生成点图，而 position 代表位置，position('x*y') 代表数据在图形中的位置由 x 和 y 这两个维度的变量决定，x * y 的数据处理结果可以理解为： 107 | 108 | ![image](https://gw.alipayobjects.com/zos/rmsportal/EcuDeyeTOsztVOuxmZPe.png) 109 | 110 | (x1, y1) 这样的数值对，最后就会被转换为画布上对应的坐标点。 111 | 112 | 另外，也可以以数组格式传入：`chart.geom().position([ 'fieldA', 'fieldB' ])` 113 | 114 | 115 | 116 | #### `color` 117 | * 类型： String | Array 118 | * 描述：将数据值映射到图形的颜色上的方法。 119 | 120 | color 支持的映射值如下： 121 | - *'field'*，field 为数据字段名，内部会使用主题中的默认颜色进行数据值到颜色值的映射； 122 | 123 | ```js 124 | //代码示例 125 | 126 | ``` 127 | - ['field', colors]，将数据值映射至指定的颜色值 colors（可以是字符串也可以是数组），此时用于通常映射分类数据； 128 | 129 | ```js 130 | //代码示例 131 | 132 | ``` 133 | - ['field', 'color1-color2-colorN')]，指定颜色的渐变路径，用于映射连续的数据； 134 | 135 | ```js 136 | //代码示例 137 | 138 | ``` 139 | - ['field', callback)]，使用回调函数进行颜色值的自定义；可以使用多个字段使用*号连接 140 | 注意： 141 | color 属性的回调函数一般返回的单个颜色，因为 G2 中所有的 shape 仅支持单个颜色 142 | color 属性的回调函数也可以返回数组，数组中有多个颜色，但是这时候需要 shape 支持多颜色的解析，详细情况查看 [自定义shape](shape)。 143 | 144 | ```js 145 | //代码示例 146 | { 148 | //some code 149 | if(cut < 1000) 150 | return '#00ff00'; 151 | else 152 | return '#ff0000'; 153 | }]} 154 | /> 155 | ``` 156 | - color('#ffffff')，直接指定颜色常量，不进行数据映射。 157 | 158 | ```js 159 | //代码示例 160 | 161 | ``` 162 | 163 | 164 | 165 | #### `shape` 166 | * 类型： String | Array 167 | * 描述：将数据值映射到图形的形状上的方法。 168 | 169 | shape 支持的映射值如下： 170 | - 'field'，将指定的字段映射到内置的 shapes 数组中； 171 | 172 | ```js 173 | //代码示例 174 | 175 | ``` 176 | - ['field', shapes]，用户自己提供 shapes 数据，来进行数据映射； 177 | 178 | ```js 179 | //代码示例 180 | 181 | ``` 182 | - ['fields', callback]，使用回调函数获取 shape，用于个性化的 shape 定制，可以根据单个或者多个字段确定； 183 | 184 | ```js 185 | //代码示例 186 | { 188 | if(city == 'hangzhou'){ 189 | return 'circle'; 190 | } 191 | return 'rect'; 192 | }]} 193 | /> 194 | ``` 195 | - 'shapeType'，指定常量，将所有数据值映射到固定的 shape。 196 | 197 | ```js 198 | //代码示例 199 | 200 | ``` 201 | 202 | 另外 BizCharts 提供了自定义 shape 的功能，用户可以自己绘制需要的 shape，详见[自定义 shape](shape)。 203 | 204 | 注：使用几何标记实现各种图表类型时，对于每一种几何标记来说，图形在绘制的时候有不同的形状（shape)，在[几何标记](geom) 章节已列出了目前 BizCharts 提供的 Geom 默认支持的 shape。 205 | 206 | 207 | 208 | #### `size` 209 | * 类型： String | Array| Number 210 | * 描述：对于不同的几何标记含义不完全一致： 211 | 212 | - 对于 point 点来说，size 对应着点的半径； 213 | - 对于 line 线来说，size 对应着线的粗细； 214 | - 对于 interval 柱状图来说，size 对应着柱子的宽度。 215 | 216 | size 支持映射值如下： 217 | - 'field'，指定映射到 size 的字段，使用内置的默认大小范围为 [1, 10]； 218 | 219 | ```js 220 | //代码示例 221 | 222 | ``` 223 | - ['field', [ min, max ]]，指定映射到 size 字段外，还提供了 size 的最大值和最小值范围； 224 | 225 | ```js 226 | //代码示例 227 | 228 | ``` 229 | - ['fields', callback)]，使用回调函数映射 size，用于个性化的 size 定制，可以使用多个字段进行映射； 230 | 231 | ```js 232 | //代码示例 233 | { 234 | if(count > 1000) 235 | return 10; 236 | else return 1; 237 | }]}/> 238 | ``` 239 | - Number，直接指定像素大小。 240 | 241 | ```js 242 | //代码示例 243 | 244 | ``` 245 | 246 | 247 | 248 | #### `opacity` 249 | * 类型： String | Array| Number 250 | * 描述：将数据值映射到图形的透明度上的方法。 251 | 252 | ```js 253 | //代码示例 254 | // 使用字段映射到透明度 255 | // 常量，但是数值范围为 0 - 1 256 | { // 回调函数 257 | if(count > 1000) 258 | return 0.6; 259 | return 0.1; 260 | }]}/> 261 | ``` 262 | 263 | #### `style` 264 | * 类型：Object | Array 265 | * 描述：配置几何图形的样式。 266 | 当 style 的值是 Object 时，该 Object 中只能设置固定样式。 267 | 当 style 的值是 Array 时，可以通过回调函数根据具体的数据去动态配置样式。 268 | 269 | ```js 270 | //代码示例 271 | { 279 | if(city === 'hangzhou' && sales > 1000) 280 | return "#ff0000"; 281 | return "#00ff00"; 282 | } 283 | }]} 284 | /> 285 | ``` 286 | 287 | 288 | #### `tooltip` 289 | * 类型：Boolean | String | Array 290 | * 描述：将数据值映射到 Tooltip 上。 291 | - Boolean 该几何标记是否需要显示 tooltip，默认值 false； 292 | - String 格式为 a*b*c，该几何标记上 tooltip 需要显示的数据字段，每个字段将会显示为一行。 293 | - Array 格式为 [a*b*c, callback],该几何标记上 tooltip 需要显示的数据字段,同时可以在 callback 中调整数据的显示格式。 294 | 295 | ```js 296 | 297 | { 299 | return { 300 | name:'xxx', 301 | value:city + ':' + sales 302 | } 303 | }]} 304 | /> 305 | ``` 306 | 307 | #### `select` 308 | * 类型： Boolean | Array 309 | * 描述：开启、关闭以及设置 shape 对于鼠标 click 事件的响应效果。BizCharts 默认仅为饼图开启了选中效果。 310 | 311 | - Boolean，是否打开对于鼠标 click 事件的响应效果。 312 | - Array，[Boolean, configObject]。 313 | 314 | ```js 315 | 323 | ``` 324 | 325 | #### `active` 326 | * 类型：Boolean | Array 327 | * 描述：开启以及关闭 shape 对于鼠标 hover 时的响应效果，G2 默认为各个 geom 内置了 active 效果。 328 | 329 | - Boolean，是否打开对于鼠标 hover 事件的响应效果。 330 | - Array，[Boolean, configObject]。 331 | ```js 332 | 340 | ``` 341 | 342 | #### `animate` 343 | * 类型：Object 344 | * 描述：定义几何标记上的动画效果，具体配置参数及使用参见[animate文档](../docs/animate) 345 | 346 | #### `hide` 347 | * 类型： Boolean 348 | * 描述：该 geom 是否默认隐藏 349 | * 默认值： false -------------------------------------------------------------------------------- /bizCharts/zh/api/axis.md: -------------------------------------------------------------------------------- 1 | # Axis 2 | 坐标轴配置，BizCharts中将Axis抽离为一个单独的组件，不使用Axis组件则默认不显示所有坐标轴及相关的信息。 3 | 4 | ## 使用说明 5 | ### 父组件 6 | `` `` 7 | 8 | ### 子组件 9 | 无 10 | 11 | ### 注意事项 12 | 13 | ```js 14 | // 不显示坐标轴 15 | 16 | 17 | 18 | ``` 19 | * 使用Axis组件时，必须指定当前坐标轴对应数据源中的字段名（字段名为name），否则该坐标轴相关配置信息将不起作用； 20 | 21 | ```js 22 | // 指定坐标轴对应数据源中的字段名 23 | 24 | 25 | 26 | 27 | ``` 28 | 29 | * 一旦使用``组件，那么所有的坐标轴都会显示，如若需要隐藏某一个坐标轴及相关信息，务必将visible参数并置为false，如下所示： 30 | 31 | ```js 32 | // 只显示其中一条坐标轴 33 | 34 | 35 | 36 | 37 | 38 | ``` 39 | 40 | ## API 41 | #### `name` 42 | * 类型：String 43 | * 描述：当前坐标轴对应数据源中的字段名(必填) 44 | ```js 45 | 46 | ``` 47 | 48 | #### `visible` 49 | * 类型： Boolean 50 | * 描述：当前坐标轴是否需要可见，默认值`true`。 51 | ```js 52 | 53 | ``` 54 | 55 | #### `position` 56 | * 类型： String 57 | * 描述：设置当前坐标轴的摆放位置，可设置的值为`top`、`bottom`、`left`、`right`。 58 | 59 | #### `title` 60 | * 类型： Object | Boolean | null 61 | * 描述：当前坐标轴标题是否需要显示,及其样式配置。 62 | 63 | 是否显示 64 | 轴的 title 是默认不显示的, 即 ``title=null``，如果需要显示需要将此属性配置为 `true`。 65 | ```js 66 | 67 | ``` 68 | 69 | 通过 `title={true}` 渲染坐标轴标题。通过以下配置对标题进行个性化配置：参考[绘图属性](./graphic) 70 | 71 | ```js 72 | const title = { 73 | autoRotate: {Boolean}, // 是否需要自动旋转，默认为 true 74 | offset: {Number}, // 设置标题 title 距离坐标轴线的距离 75 | textStyle: { 76 | fontSize: '12', 77 | textAlign: 'center', 78 | fill: '#999', 79 | fontWeight: 'bold', 80 | rotate: {角度} 81 | }, // 坐标轴文本属性配置 82 | position: 'start' || 'center' || 'end', // 标题的位置，**新增** 83 | } 84 | ``` 85 | 提示：当需要配置坐标轴标题文本时，在该轴的 scale 中设置 alias 属性，如下所示，更多 scale 设置请查看 scale。 86 | 87 | ```js 88 | const scale = { 89 | sales:{ 90 | alias:'标题名称' 91 | } 92 | }; 93 | 94 | 95 | 96 | 97 | ``` 98 | 99 | #### `line` 100 | * 类型： Object | null 101 | * 描述：设置坐标轴线的样式，包括线的颜色、粗细等。如果该属性值为 null 则表示不展示坐标轴线。样式设置细节参考[绘图属性](./graphic) 102 | 103 | ```js 104 | //可配置样式 105 | { 106 | stroke: 'dddddd', 107 | fill: '#ffffff', 108 | lineDash: [2, 2, 3], 109 | lineWidth: 3 110 | } 111 | ``` 112 | 113 | #### `tickLine` 114 | * 类型： Object | null 115 | * 描述：设置坐标轴的刻度线。如果该属性值为 null 则表示不展示。 116 | 117 | ```js 118 | //可配置样式 119 | const tickLine = { 120 | lineWidth: 1, // 刻度线宽 121 | stroke: '#ccc', // 刻度线的颜色 122 | length: 5, // 刻度线的长度, **原来的属性为 line**,可以通过将值设置为负数来改变其在轴上的方向 123 | } 124 | ``` 125 | 126 | 提示：刻度线个数、范围、内容可以通过该轴的 scale 配置，如下所示，更多 scale 配置请查看 scale。 127 | 128 | ```js 129 | const scale = { 130 | sales:{ 131 | min: 0, // 定义数值范围的最小值 132 | max: 10000, // 定义数值范围的最大值 133 | ticks: [100, 1000, 2000, 3000], // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。 134 | tickInterval: 1000, // 用于指定坐标轴各个标度点的间距，是原始数据之间的间距差值，tickCount 和 tickInterval 不可以同时声明。 135 | tickCount: 10, // 定义坐标轴刻度线的条数，默认为 5 136 | } 137 | }; 138 | 139 | 140 | 141 | 142 | ``` 143 | 144 | 145 | #### `label` 146 | * 类型： Object | null 147 | * 描述：设置坐标轴文本的样式。如果该属性值为 null 则表示不展示坐标轴文本。 148 | 149 | ```js 150 | const label = { 151 | offset: {number}, // 数值，设置坐标轴文本 label 距离坐标轴线的距离 152 | rotate: 30, // 旋转角度 153 | // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值 154 | rotate: 30, //文本旋转角度 155 | textStyle: { 156 | textAlign: 'center', // 文本对齐方向，可取值为： start center end 157 | fill: '#404040', // 文本的颜色 158 | fontSize: '12', // 文本大小 159 | fontWeight: 'bold', // 文本粗细 160 | textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle 161 | } | (text) => { 162 | // text: 坐标轴对应字段的数值 163 | }, 164 | autoRotate: {boolean}, // 文本是否需要自动旋转，默认为 true 165 | /** 166 | * 用于格式化坐标轴上显示的文本信息的回调函数 167 | * @param {string} text 文本值 168 | * @param {object} item 该文本值对应的原始数据记录 169 | * @param {number} index 索引值 170 | * @return {string} 返回格式化后的文本值 171 | */ 172 | formatter(text, item, index) { 173 | let arr = text.split(' '); 174 | return `${arr[0]}\n${arr[1]}`; 175 | }, 176 | /** 177 | * 使用 html 渲染文本 178 | * @param {string} text 文本值 179 | * @param {object} item 该文本值对应的原始数据记录 180 | * @param {number} index 索引值 181 | * @return {string} 返回 html 字符串 182 | */ 183 | htmlTemplate(text, item, index) {} 184 | } 185 | 186 | 187 | 188 | 189 | ``` 190 | 191 | 提示：label显示文本等配置也可以通过该轴的 scale 配置，如下所示，更多 scale 配置请查看 scale。 192 | 193 | ```js 194 | const scale = { 195 | sales: { 196 | min:0, // 定义数值范围的最小值 197 | max:10000, // 定义数值范围的最大值 198 | ticks:[100, 1000, 2000, 3000], // 用于指定坐标轴上刻度点的文本信息（label），当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。 199 | tickInterval: 1000, // 用于指定坐标轴各个标度点的间距，是原始数据之间的间距差值，tickCount 和 tickInterval 不可以同时声明。 200 | tickCount: 10, // 定义坐标轴刻度线的条数，默认为 5 201 | } 202 | }; 203 | 204 | 205 | 206 | 207 | ``` 208 | 209 | #### `grid` 210 | * 类型： Object | null 211 | * 描述：设置坐标轴网格线的样式，网格线与坐标轴线垂直。如果该属性值为 null 则表示不展示。 212 | 更多参考[绘图属性](./graphic) 213 | 214 | ```js 215 | //可配置样式 216 | const grid = { 217 | align: 'center', // 网格顶点从两个刻度中间开始 218 | type: 'line' || 'polygon', // 网格的类型 219 | lineStyle: { 220 | stroke: '#d9d9d9', // 网格线的颜色 221 | lineWidth: 1, // 网格线的宽度复制代码 222 | lineDash: [4, 4] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素 223 | }, // 网格线的样式配置，原有属性为 line 224 | alternateColor: '#ccc' || ['#f80', '#ccc'], // 为网格设置交替的背景色，指定一个值则先渲染奇数层，两个值则交替渲染。**代替原有的 odd 和 even 属性** 225 | } 226 | ``` 227 | 228 | > 提示：当数字中有负数时，需要设置 0 轴线对齐，设置grid属性`zeroLineStyle` 229 | 230 | ```js 231 | 232 | const data = [ 233 | { category: 'Sports', sold: 275 }, 234 | { category: 'Strategy', sold: -255 }, 235 | { category: 'Action', sold: 120 }, 236 | { category: 'Shooter', sold: 650 }, 237 | { category: 'Other', sold: 150 } 238 | ] 239 | 240 | // 0轴线对齐 241 | const grid = { 242 | hightLightZero: true, 243 | zeroLineStyle: { 244 | stroke: '#ddd', 245 | lineDash: [2, 4] 246 | } 247 | } 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | ``` 256 | 257 | ![](https://img.alicdn.com/tfs/TB1Y6Jlv77mBKNjSZFyXXbydFXa-1526-2068.png_500x500) 258 | 259 | #### `subTickCount` 260 | * 类型： Number 261 | * 描述：当前坐标轴次刻度线个数。 262 | ```js 263 | // 设置次刻度线的个数，数值类型 264 | ``` 265 | 266 | #### `subTickLine` 267 | * 类型： Object 268 | * 描述：当前坐标轴次刻度线样式配置。 269 | ```js 270 | //可配置样式 271 | const subTickLine = { 272 | lineWidth: 1, // 次刻度线宽 273 | stroke: '#ddd', // 次刻度线颜色 274 | strokeOpacity: 0.5, // 次刻度线颜色的透明度 275 | length: 3 // 次刻度线的长度，可以为负值（表示反方向渲染） 276 | } 277 | ``` 278 | 279 | ## 其他配置 280 | 坐标轴有很多配置是需要通过配置对应的 scale 才能达到。以下列举了几个常用的 scale 配置，不同类型的 scale 配置的属性略微不同，想知道更多请查看[scale文档](scale) 281 | ### 坐标轴显示范围 282 | 需要设置对应 scale 中的 min、max 属性。 283 | 284 | ```js 285 | const scale = { 286 | sales:{ 287 | type:"linear", 288 | min:0, 289 | max:1000, 290 | }, 291 | } 292 | 293 | 294 | 295 | 296 | ``` 297 | 298 | ### 坐标轴刻度个数 299 | 需要设置对应 scale 中的 tickCount 属性。 300 | 301 | ```js 302 | const scale = { 303 | sales:{ 304 | type:"linear", 305 | tickCount:10, 306 | }, 307 | } 308 | 309 | 310 | 311 | 312 | ``` 313 | ### 坐标轴刻度线间距 314 | 对于连续类型的数据，还支持设置坐标轴刻度线的间距（tickInterval 属性），同样需要在 scale 中进行配置，但是需要说明的是，tickInterval 为原始数据值的差值，并且 tickCount 和 tickInterval 不可以同时声明。 315 | 316 | ```js 317 | const scale = { 318 | sales:{ 319 | type:"linear", 320 | tickInterval:100, 321 | }, 322 | } 323 | 324 | 325 | 326 | 327 | ``` 328 | 329 | ### 坐标轴两端空白 330 | 对于分类数据的坐标轴两边默认会留下一定的空白，连续数据的坐标轴的两端没有空白刻度。 331 | ![坐标轴](https://zos.alipayobjects.com/basement/skylark/0ad6383d14791895682958949d755f/attach/4080/900/image.png) 332 | 是否两端有空白是列定义里面 range 属性决定的，分类列的 range 的默认值是 [ 1 / (count - 1), 1 - 1 / (count - 1) ]，可以修改这个值达到改变空白大小的目的。 333 | 334 | ```js 335 | const scale = { 336 | city:{ 337 | type:"cat", 338 | range: [ 0, 1 ] 339 | }, 340 | } 341 | 342 | 343 | 344 | 345 | ``` 346 | 347 | ### 坐标轴在其他坐标系下的显示 348 | 349 | 不同的坐标系下坐标轴的显示不一样，默认的配置项也不同 350 | 351 | * 极坐标下的坐标轴上默认不显示title，栅格线有圆形和多边形两种； 352 | * theta、helix 坐标系默认不显示坐标轴； 353 | * polar 坐标系发生 transpose 时也不显示坐标轴。 354 | -------------------------------------------------------------------------------- /bizCharts/zh/api/tooltip.md: -------------------------------------------------------------------------------- 1 | # Tooltip 2 | 3 | 提示信息(tooltip)组件，是指当鼠标悬停在图表上的某点时，以提示框的形式展示该点的数据，比如该点的值，数据单位等。 4 |

5 | 6 | ## 父组件 7 | [``](chart) [``](view) 8 | 9 | ## 子组件 10 | 无 11 | 12 | ## 使用 13 | 14 | > BizCharts 默认不展示 ``，只有当用户使用了该组件时，图表才会有 tooltip。 15 | 16 | ```js 17 | 18 | // 开启图表tooltip功能 19 | 20 | 21 | ``` 22 | 23 | ## 组成 24 | ![](https://zos.alipayobjects.com/skylark/750725d4-2e58-4420-b886-4abe1c0335c2/attach/2378/ad8fe2daa557ad62/image.png) 25 | 26 | ## API 27 | 28 | ### 通用属性 29 | 30 | #### `useHtml` 31 | * 类型: Boolean 32 | * 描述: 是否使用html渲染，默认为true, false 时使用canvas渲染。 33 | 34 | 35 | #### `type` 36 | * 类型: string 37 | * 描述: tooltip 类型，mini 则启动显示单个数据值的 miniTooltip。 38 | 39 | #### `triggerOn` 40 | * 类型: String 41 | * 描述: tooltip 的触发方式,可配置的值为：'mousemove'、'click'、'none'，默认为 `mousemove`。 42 | 43 | * 'mousemove': 鼠标移动触发； 44 | * 'click': 鼠标点击出发； 45 | * 'none': 不触发 tooltip，用户通过 `chart.showTooltip()` 和 `chart.hideTooltip()` 来控制 tooltip 的显示和隐藏。 46 | 47 | #### `inPlot` 48 | * 类型: Boolean 49 | * 描述: 设置是否将 tooltip 限定在绘图区域内，默认为 true，即限定在绘图区域内。 50 | 51 | #### `position` 52 | * 类型：string 53 | * 描述：该属性设置之后，就会在固定位置展示 tooltip，可设置的值为：`left`、`right`、`top`、`bottom`。 54 | 55 | #### `showTitle` 56 | * 类型：Boolean 57 | * 描述：是否展示提示信息的标题，默认为 true，即展示，通过设置为 false 来隐藏标题。 58 | 59 | #### `title` 60 | * 类型：string 61 | * 描述：设置 tooltip 的标题展示的数据字段，设置该字段后，该标题即会展示该字段对应的数值。`showTitle` 为 false 时，该设置不生效。 62 | 63 | #### `shared` 64 | * 类型：Boolean 65 | * 描述：是否展示多条 tooltip, 默认值:true; 66 | false表示只展示单条 tooltip。 67 | 68 | #### `follow` 69 | * 类型：Boolean 70 | * 描述：设置 tooltip 是否跟随鼠标移动。默认为 true，即跟随。 71 | 72 | #### `offset` 73 | * 类型：Number 74 | * 描述：设置 tooltip 距离鼠标的偏移量。 75 | 76 | #### `enterable` 77 | * 类型：boolean 78 | * 描述：用于控制是否允许鼠标进入 tooltip，默认为 false，即不允许进入。 79 | 80 | 81 | ### 辅助元素属性 82 | 83 | #### `crosshairs` 84 | * 类型：Object 85 | * 描述：是一个对象类型，用于设置 tooltip 的辅助线或者辅助框。 86 | 87 | 默认我们为 ‘line’, ‘area’, ‘path’, ‘areaStack’ 类型的几何图形开启了垂直辅助线；geom 为‘interval’ 默认会展示矩形背景框。如下图所示： 88 | 89 |

90 | 91 | 该属性可支持的配置如下： 92 | ```js 93 | //可配置值 94 | //geom为 'line', 'area', 'path', 'areaStack 时默认会展示垂直辅助线 95 | //geom为 'interval' 默认会展示矩形背景框 96 | 108 | 109 | ``` 110 | 111 | ### markerGroup 属性 112 | 113 | 对于 line、area、path 这三种几何图形，G2在渲染 tooltip 时会自动渲染tooltipMarker![](https://img.alicdn.com/tfs/TB1jdEducbpK1RjSZFyXXX_qFXa-40-40.png)。 114 | 115 | #### `hideMarkers` 116 | * 类型: boolean 117 | * 描述: 该属性值为 true 来关闭 tooltipMarker。 118 | 119 | 120 | ### htmlTooltip 属性 121 | 以下配置项只有在useHtml为true的时候才能生效。 122 | 123 | #### `htmlContent` 124 | * 类型: Function 125 | * 描述: 支持用户获取当前tooltip取值，并完全自定义tooltip，用户可以根据htmlContent方法返回的title和items两个参数定义tooltip dom节点的构成和显示方式。 126 | 127 | ```js 128 | {return '

.....

'}}> 129 | ``` 130 | 131 | #### `containerTpl` 132 | * 类型: String 133 | * 描述: tooltip 默认的容器模板，默认值如下： 134 | ```js 135 | containerTpl= '', 139 | ``` 140 | > 如默认结构不满足需求，可以自定义该模板，但是**自定义模板时必须包含各个 dom 节点的 class**，样式可以自定义。 141 | 142 | 143 | 144 | #### `itemTpl` 145 | * 类型：String 146 | * 描述：tooltip 每项记录的模版，这个属性可以格式化 tooltip 的显示内容。 147 | 默认值: 148 | ```js 149 | itemTpl= '

' 150 | + '' 151 | + '{name}: {value}' 152 | + '

' 153 | 154 | ``` 155 | > 如默认结构不满足需求，可以自定义该模板，但是**自定义模板时必须包含各个 dom 节点的 class**，样式可以自定义。 156 | 157 | #### `g2-tooltip` 158 | 设置 tooltip 容器的 CSS 样式。 159 | 160 | #### `g2-tooltip-title` 161 | 设置 tooltip 标题的 CSS 样式。 162 | 163 | #### `g2-tooltip-list` 164 | 设置 tooltip 列表容器的 CSS 样式。 165 | 166 | #### `g2-tooltip-list-item` 167 | 设置 tooltip 列表容器中每一项的 CSS 样式。 168 | 169 | #### `g2-tooltip-marker` 170 | * 类型：Object 171 | * 描述：设置tooltip 列表容器中每一项 marker 的 CSS 样式。 172 | 173 | #### `g2-tooltip-value` 174 | * 类型：Object 175 | * 描述：设置tooltip 列表容器中每一项 value 的 CSS 样式。 176 | 177 | #### `enterable` 178 | * 类型: Boolean 179 | * 描述: 用于控制是否允许鼠标进入 tooltip，默认为 false，即不允许进入。 180 | 181 | ### canvasTooltip 属性 182 | 通过设置配置项useHtml:false可以切换为canvasTooltip，以下配置项只有在useHtml为false的时候才能生效。 183 | 184 | #### `boardStyle` 185 | * 类型: Object 186 | * 描述: 用于控制tooltip背景板的显示样式，更详细见 [绘图属性]() 187 | 188 | #### `titleStyle` 189 | * 类型: Object 190 | * 描述: 用于控制tooltip标题的显示样式，更详细见 [绘图属性]() 191 | 192 | #### `nameStyle` 193 | * 类型: Object 194 | * 描述: 用于控制tooltip每一项 name 的显示样式，更详细见 [绘图属性]() 195 | 196 | #### `valueStyle` 197 | * 类型: Object 198 | * 描述: 用于控制tooltip每一项 value 的显示样式，更详细见 [绘图属性]() 199 | 200 | #### `itemGap` 201 | * 类型: Number 202 | * 描述: 用于控制tooltip每一项之间的间距 203 | 204 | ### miniTooltip 属性 205 | mini tooltip是一种极简的tooltip形式，只显示单个数据的数值。通过设置配置项type:mini切换为miniTooltip，以下配置项只有在type为'mini'的时候才能生效。 206 | 207 | #### `boardStyle` 208 | * 类型: Object 209 | * 描述: 用于控制tooltip背景板的显示样式，更详细见 [绘图属性]() 210 | 211 | #### `valueStyle` 212 | * 类型: Object 213 | * 描述: 用于控制tooltip每一项 value 的显示样式，更详细见 [绘图属性]() 214 | 215 | #### `triangleWidth` 216 | * 类型: Number 217 | * 描述: 设置 tooltip 三角装饰的宽度 218 | 219 | #### `triangleHeight` 220 | * 类型: Number 221 | * 描述: 设置 tooltip 三角装饰的高度 222 | 223 | 224 | 225 | ```js 226 | 227 | 245 | ``` 246 | 247 | ## 其他配置 248 | 249 | 250 | 251 | ### 格式化 tooltip 显示内容 252 | 1、通过 `` 上的 *tooltip* 属性的回调函数来配置。 253 | 254 | 示例代码: 255 | ```js 256 | 257 | { 259 | return { 260 | //自定义 tooltip 上显示的 title 显示内容等。 261 | name: 'sold', 262 | title: 'dddd' + time, 263 | value: sold 264 | }; 265 | }]} 266 | /> 267 | 268 | ``` 269 | 270 | 2、通过 `` 上的 itemTpl 来格式化显示内容，详见[itemTpl属性说明](#itemTpl)。 271 | 272 | 3、特别复杂的场景可以通过 `` 上的 onTooltipChange 事件来格式化 `` 显示内容;详见 [onTooltipChange](chart#onTooltipChange) 273 | 274 | ### 固定位置显示 tooltip 275 | 可以通过` `组件上的 showTooltip 属性来控制在固定的位置显示提示信息，详见[chart showTooltip 属性说明](chart#showTooltip)。 276 | 277 | ## 示例 278 | 279 | ### 样式配置 280 | 281 | ```html 282 | // 略... 283 | import { Chart, Geom, Axis, Tooltip } from 'bizcharts'; 284 | 285 | const data = [{ genre: 'Sports', sold: 275 } /* 略... */]; 286 | const cols = {sold: { alias: '销售量' }, genre: { alias: '游戏种类' }}; 287 | 288 | ReactDOM.render(( 289 | 290 | 291 | 292 | 293 | 294 | 295 | ), document.getElementById('mountNode')); 296 | ``` 297 | 298 | ### 自定义 299 | 300 | ```html 301 | // 略... 302 | import { Chart, Geom, Axis, Tooltip } from 'bizcharts'; 303 | 304 | const data = [{ genre: 'Sports', sold: 275 } /* 略... */]; 305 | const tooltipCfg = { 306 | custom: true, 307 | containerTpl: '', 308 | itemTpl: '{index}{name}{value}k' 309 | }; 310 | 311 | ReactDOM.render(( 312 | 313 | 314 | 315 | 316 | 317 | 318 | ), document.getElementById('mountNode')); 319 | ``` -------------------------------------------------------------------------------- /bizCharts/zh/api/chart.md: -------------------------------------------------------------------------------- 1 | # Chart 2 | 3 | 图表组件，内部生成了一个 G2 chart 实例，同时控制着其他子组件的加载和更新。 4 | 5 | ## 子组件 6 | - [``](coord) 7 | - [``](axis) 8 | - [``](geom) 9 | - [``](legend) 10 | - [``](tooltip) 11 | - [``](guide) 12 | - [``](facet) 13 | - [``](view) 14 | 15 | [在线 Demo](http://bizcharts.net/products/bizCharts/demo/detail?id=line-basic&selectedKey=折线图) 16 | 17 | ```js 18 | 19 | 20 | 阿里销售业绩 21 | 22 | 23 | 2018年每月新零售门店销量 24 | 25 | 26 | `${val}°C` }} /> 27 | 28 | 29 | 37 | 38 | ``` 39 | 40 | [Demo](https://bizcharts.net/products/bizCharts/demo#折线图) 41 | 42 | ## 父组件 43 | Any monted node 44 | 45 | ## 图表布局 46 | ![e9d103b3-1707-446e-b5fe-b535f7048c8b.png](https://img.alicdn.com/tfs/TB1G7_0bOqAXuNjy1XdXXaYcVXa-1148-542.png) 47 | ``有时候坐标轴、图例等绘图区域外的组件显示不全时，可以通过调整图表各个方向的 padding 来调整最终效果`` 48 | 49 | ## API 50 | #### `renderer` 51 | * 类型：String 52 | * 描述：指定图表的渲染方式，自BizCharts 3.2.1-beta.2版本开始，支持 chart 级别使用 svg 渲染。 53 | * 默认值: canvas,可选值 svg. 54 | 55 | > 使用方式1: 56 | 指定当前所有图表都用 svg 渲染。 57 | 58 | ```js 59 | const { G2 } from 'bizcharts'; 60 | 61 | G2.Global.renderer = 'svg' // or 'canvas'; 62 | ``` 63 | 64 | > 使用方式2: 65 | 指定这一个图表使用 svg 渲染。 66 | 67 | ```js 68 | 69 | ``` 70 | 71 | svg、canvas 渲染更多说明[请点击](//www.yuque.com/antv/g2-docs/tutorial-renderers) 72 | 73 | #### `forceFit` 74 | * 类型：Boolean 75 | * 描述：图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。 76 | 77 | > bizcharts 图表只提供自适应父容器宽度的功能，不能自适应高度。 78 | 79 | #### `width` 80 | * 类型：Number 81 | * 描述：指定图表的宽度，默认单位为 'px'，当 *forceFit: true* 时宽度配置不生效。 82 | 83 | #### `height` 84 | * 类型：Number(必填) 85 | * 描述：指定图表的高度，单位为 'px'。 86 | 87 | > 宽和高未指定时，默认为 500px 88 | 89 | 90 | 91 | #### `data` 92 | * 类型：Array/DataSet 93 | * 描述：设置图表的数据源，`data` 是一个包含 JSON 对象的数组或者 DataSet.View 对象。 94 | 具体参见 [数据](../docs/data) 95 | 96 | 97 | 98 | #### `scale` 99 | * 类型：Object 100 | * 描述：配置数据比例尺，该配置会影响数据在图表中的展示方式。 101 | 102 | ```js 103 | const scale = { 104 | 'sales': { 105 | type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow', // 指定数据类型 106 | alias: string, // 数据字段的别名，会影响到轴的标题内容 107 | formatter: () => {}, // 格式化文本内容，会影响到轴的label格式 108 | range: array, // 输出数据的范围，默认[0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1 范围的数据。 109 | tickCount: number, // 设置坐标轴上刻度点的个数 110 | ticks: array, // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示 111 | sync: boolean // 当 chart 存在不同数据源的 view 时，用于统一相同数据属性的值域范围 112 | } 113 | }; 114 | 115 | ``` 116 | > !注意：除了以上属性外，不同的 type 还对应有各自的可配置属性，详见 [Scale 度量 API](./scale); 117 | 118 | 119 | #### `placeholder` 120 | * 类型：string 121 | * 描述：图表source为空时显示的内容，未设置该属性时为G2 默认样式。`` 则为Bizcharts 定义的无数据提示。 122 | 默认值: `

暂无数据

` ;会在图表区域的中间显示 "暂无数据" 。 123 | 124 | 125 | 126 | #### `padding` 127 | * 类型：Object | Number | Array 128 | * 描述：图表内边距，有如下配置方式: 129 | 130 | ```js 131 | //有时候坐标轴、图例等绘图区域外的组件显示不全时，可以通过调整图表各个方向的 padding 来调整最终效果 132 | 133 | 134 | 135 | 136 | 137 | 138 | ``` 139 | 140 | - padding 为数字以及数组类型时使用方法同 CSS 盒模型。 141 | - padding 中存在 'auto'，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框。 142 | - 另外也支持设置百分比，如 padding: [ '20%', '30%' ]，该百分比相对于整个图表的宽高。 143 | - padding 为数字以及数组类型时使用方法同 CSS 盒模型。 144 | - padding 中存在 'auto'，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框。 145 | 146 | 147 | #### `animate` 148 | * 类型：Boolean 149 | * 描述：图表动画开关，默认为 true，即开启动画。 150 | 151 | > 如果用户需要自定义图表的动画，需要配置 animate 接口使用。具体参见 [自定义动画](../docs/animate) 152 | 153 | 154 | #### `background` 155 | * 类型：Object 156 | * 描述：设置图表整体的边框和背景样式，是一个对象，包含如下属性： 157 | 158 | ```javascript 159 | //可配置样式有 160 | { 161 | fill: string, // 图表背景色 162 | fillOpacity: number, // 图表背景透明度 163 | stroke: string, // 图表边框颜色 164 | strokeOpacity: number, // 图表边框透明度 165 | opacity: number, // 图表整体透明度 166 | lineWidth: number, // 图表边框粗度 167 | radius: number // 图表圆角大小 168 | } 169 | ``` 170 | 171 | #### `plotBackground` 172 | * 类型：Object 173 | * 描述：图表绘图区域的边框和背景样式，是一个对象，包含如下属性： 174 | 175 | ```javascript 176 | //可配置样式有 177 | { 178 | fill: string, // 图表背景色 179 | fillOpacity: number, // 图表背景透明度 180 | stroke: string, // 图表边框颜色 181 | strokeOpacity: number, // 图表边框透明度 182 | opacity: number, // 图表整体透明度 183 | lineWidth: number, // 图表边框粗度 184 | radius: number // 图表圆角大小 185 | } 186 | ``` 187 | 188 | #### `pixelRatio` 189 | * 类型：Number 190 | * 描述：设置设备像素比，默认取浏览器的值 *window.devicePixelRatio*。 191 | 192 | 193 | 194 | #### `filter` 195 | * 类型：Array 196 | * 描述：过滤数据，如果存在对应的图例，则过滤掉的字段置灰。 197 | Array:[[fieldString1, callback1], [fieldString2, callback2]] 198 | ```js 199 | val > 20] // 图表将会只渲染 x 字段数值大于 20 的数据 202 | ]} 203 | /> 204 | ``` 205 | 206 | > 改属性可以设置默认哪些图表选中和不选中状态。 207 | 208 | #### `className` 209 | * 类型：String 210 | * 描述：设置图表最外层div的类名。 211 | ```js 212 | 213 | ``` 214 | 215 | #### `style` 216 | * 类型：Object 217 | * 描述：设置图表最外层div的样式。 218 | ```js 219 | const style={fontSize: '12'} 220 | 221 | ``` 222 | 223 | #### `theme` 224 | * 类型：String | Object 225 | * 描述：设置当前图表的主题，默认提供 "default" 和 "dark" 样式。也可以是一个包含主题配置项的对象，具体配置项参考图表[皮肤内容](./theme)。 226 | 227 | > 这是“Chart 级别的主题样式配置”。 228 | 229 | 230 | ## 图表事件 231 | ``组件提供了各种事件，方便用户扩展交互。基本的事件用法如下： 232 | 233 | ```js 234 | { 236 | //do something 237 | }} 238 | /> 239 | ``` 240 | 241 | 更新属性时，如果某事件不指定监听函数，表示删除该事件。 242 | 243 | 下面列出了 ` `支持的所有事件属性。 244 | 245 | #### `onGetG2Instance` 246 | * 类型：Function 247 | * 描述：获取 chart 实例的回调。每当生成一个新 chart 时就会调用该函数，并以新生成的 chart 作为回调参数。 248 | 249 | ```js 250 | { 252 | g2Chart.animate(false); 253 | console.log(g2Chart); 254 | }} 255 | /> 256 | ``` 257 | 258 | #### `onPlotMove` 259 | * 类型：Function 260 | * 描述：鼠标在绘图区域移动时触发，在图表的绘图区域外不触发。 261 | 262 | * *ev* 表示事件触发时返回的对象，包含以下属性 263 | + x：当前鼠标所在的画布上的 x 坐标； 264 | + y：当前鼠标所在的画布上的 y 坐标； 265 | + target：canvas 对象； 266 | + toElement：当前 dom 元素； 267 | + shape: 当前鼠标所在的 shape 对象； 268 | + views: Array，当前鼠标所在的视图。 269 | 270 | ```js 271 | let chartIns; 272 | 273 | {chartIns = g2Chart;}} 275 | onPlotMove={ev => { 276 | var point = { 277 | x: ev.x, 278 | y: ev.y 279 | }; 280 | var items = chartIns.getTooltipItems(point); 281 | console.log(items); 282 | }} 283 | /> 284 | ``` 285 | 286 | #### `onPlotEnter` 287 | * 类型：Function 288 | * 描述：鼠标进入绘图区域时触发。 289 | 290 | * *ev* 表示事件触发时返回的对象，包含以下属性 291 | + x：当前鼠标所在的画布上的 x 坐标； 292 | + y：当前鼠标所在的画布上的 y 坐标； 293 | + target：canvas 对象； 294 | + toElement：当前 dom 元素； 295 | + views: Array，当前鼠标所在的视图。 296 | 297 | ```js 298 | { 300 | var point = { 301 | x: ev.x, 302 | y: ev.y 303 | }; 304 | var items = chart.getTooltipItems(point); 305 | console.log(items); 306 | }} 307 | /> 308 | ``` 309 | 310 | #### `onPlotLeave` 311 | * 类型：Function 312 | * 描述：当鼠标移出绘图区域时触发。 313 | 314 | * *ev* 表示事件触发时返回的对象，包含以下属性 315 | + x：当前鼠标所在的画布上的 x 坐标； 316 | + y：当前鼠标所在的画布上的 y 坐标； 317 | + target：canvas 对象； 318 | + toElement：当前 dom 元素； 319 | + views: Array，当前鼠标所在的视图。 320 | 321 | ```js 322 | { 324 | var point = { 325 | x: ev.x, 326 | y: ev.y 327 | }; 328 | var items = chart.getTooltipItems(point); 329 | console.log(items); 330 | }} 331 | /> 332 | ``` 333 | 334 | #### `onPlotClick` 335 | * 类型：Function 336 | * 描述：鼠标点击绘图区域时触发的事件。 337 | 338 | * *ev* 表示事件触发时返回的对象，包含以下属性 339 | + x：当前鼠标所在的画布上的 x 坐标； 340 | + y：当前鼠标所在的画布上的 y 坐标； 341 | + target：canvas 对象； 342 | + toElement：当前 dom 元素； 343 | + views: Array，当前鼠标所在的视图； 344 | + shape：点击的图表 shape，可能为空； 345 | + data：选中图形代表的数据，可能为空； 346 | + geom：选中的图形，可能为空。 347 | 348 | #### `onPlotDblClick` 349 | * 类型：Function 350 | * 描述：鼠标双击绘图区域时触发的事件。 351 | 352 | * *ev*: 事件触发时返回的对象，包含以下属性 353 | + x：当前鼠标所在的画布上的 x 坐标； 354 | + y：当前鼠标所在的画布上的 y 坐标； 355 | + target：canvas 对象； 356 | + toElement：当前 dom 元素； 357 | + views: Array，当前鼠标所在的视图； 358 | + shape：点击的图表 shape，可能为空； 359 | + data：选中图形代表的数据，可能为空； 360 | + geom：选中的图形，可能为空。 361 | 362 | 363 | #### `onTooltipChange` 364 | * 类型：Function 365 | * 描述：tooltip 信息更新改变的时候触发。 366 | 367 | * ev：事件触发时返回的对象，包含以下属性： 368 | + tooltip: 当前生成的 tooltip 对象； 369 | + x: 画布上的 x 坐标； 370 | + y: 画布上的 y 坐标； 371 | + items: 当前 tooltip 中的数据项。 372 | 373 | 可以通过该事件回调函数，改变 items 中的内容来动态调整 tooltip 的显示内容。 374 | 示例代码: 375 | 376 | ```js 377 | { 379 | var items = ev.items; // tooltip显示的项 380 | var origin = items[0]; // 将一条数据改成多条数据 381 | var range = origin.point._origin.range; 382 | items.splice(0); // 清空 383 | items.push({ 384 | name: '开始值', 385 | title: origin.title, 386 | marker: true, 387 | color: origin.color, 388 | value: range[0] 389 | }); 390 | items.push({ 391 | name: '结束值', 392 | marker: true, 393 | title: origin.title, 394 | color: origin.color, 395 | value: range[1] 396 | }); 397 | }} 398 | /> 399 | ``` 400 | 401 | #### `onTooltipShow` 402 | * 类型：Function 403 | * 描述：tooltip 显示时触发。 404 | 405 | * ev：事件触发时返回的对象，包含以下属性： 406 | + tooltip: 当前生成的 tooltip 对象； 407 | + x: 画布上的 x 坐标； 408 | + y: 画布上的 y 坐标。 409 | 410 | #### `onTooltipHide` 411 | * 类型：Function 412 | * 描述：tooltip 隐藏或者消失时触发。 413 | 414 | * ev：事件触发时返回的对象，包含以下属性： 415 | + tooltip: 当前生成的 tooltip 对象。 416 | 417 | #### 图形元素事件 418 | * 类型：Function 419 | * 描述：图形元素事件属性名 = on + 图形元素名称 + 基础事件名，总计220种组合。 420 | * 示例：`onPointClick`, `onAxisLabelClick`; 421 | 422 | | 图形元素名称 | 423 | | ------------------------------------------------------------------------- | 424 | | `Point`, `Area`, `Line`, `Path`, `Interval`, `Schema`, `Polygon`, `Edage` | 425 | | `AxisTitle`, `AxisLabel`, `AxisTicks`, `AxisLine`, `AxisGrid` | 426 | | `LegendTitle`, `LegendItem`, `LegendMarker`, `LegendText` | 427 | | `GuideText`, `GuideLine`, `GuideRegion`, `GuideImage`, `Label` | 428 | 429 | > 图形元素名称总计22种; 430 | 431 | | 基础事件名 | 432 | | ------------------------------------------------------------- | 433 | | `Mouseenter`, `Mousemove`,`Mouseleave`,`Mousedown`, `Mouseup` | 434 | | `Click`, `Dblclick`, `Touchstart`, `Touchmove`, `Touchend` | 435 | 436 | > 基础事件名总计10种; 437 | 438 | 代码示例： 439 | 440 | ```js 441 | { 442 | //some code 443 | }/> 444 | ``` 445 | -------------------------------------------------------------------------------- /bizCharts/zh/api/dataset.md: -------------------------------------------------------------------------------- 1 | # DataSet 2 | 3 | 当源数据不是标准的 JSON 数组，或需要做特殊处理（如文字云），或需要做统计处理（如汇总、百分比等）时，除了自行进行转换，也可以使用 **DataSet** 来辅助完成。DataSet 不内置在 BizCharts 中，需要自行引入 npm 模块 `@antv/data-set` 或外链引入 umd 格式的 js，详细见 [G2 的 DataSet 介绍](https://antv.alipay.com/zh-cn/g2/3.x/tutorial/data-set.html)。 4 | 5 | ## 安装使用 6 | 7 | ```bash 8 | npm install @antv/data-set -S 9 | ``` 10 | 11 | ```js 12 | const DataSet = require('@antv/data-set'); 13 | const dv = new DataSet.View(); 14 | ``` 15 | 16 | ## 静态常量 17 | 18 | ### CONSTANTS 19 | 20 | `DataSet.CONSTANTS` 包含了以下的常量，同时也被复制到了 `DataSet` 下，即 `DataSet.CONSTANTS.GEO === DataSet.GEO`。 21 | 22 | - HIERARCHY: 'hierarchy' 23 | - GEO: 'geo' 24 | - HEX: 'hex' 25 | - GRAPH: 'graph' 26 | - TABLE: 'table' 27 | - GEO_GRATICULE: 'geo-graticule' 28 | - STATISTICS_METHODS: [ 'max', 'mean', // alias: average 'median', 'min', 'mode', 'product', 'standardDeviation', 'sum', 'sumSimple', 'variance' ] 29 | 30 | ### connectors 31 | 32 | 存储已注册的 Connector（key-value 对），Connector 用法见 [Connector](./connector)。 33 | 34 | ### transforms 35 | 36 | 存储已注册的 Transform（key-value 对），Transform 用法见 [Transform](./transform)。 37 | 38 | ## 静态方法 39 | 40 | ### registerConnector 41 | 42 | `DataSet.registerConnector(name, connector)` 注册一个数据连接函数，注册后所有数据视图都可以使用 `name` 来引用这个数据连接函数，从而接入某种数据源。 43 | 44 | #### 参数 45 | * `name` 46 | * 类型：String 47 | * 描述：connector 的名称标识。 48 | 49 | * `connector` 50 | * Function 51 | * 描述：connector 的参数是原始数据 `data` 和配置项 `options`，需要返回 `DataSet.View` 实例所需要的数据。 52 | 53 | - `data` 54 | 55 | 源数据，DataSet.View 实例 `source` 方法的第一个参数。 56 | 57 | - `options` 58 | 59 | DataSet.View 实例 `source` 数据时指定的配置项，即第二个参数，是一个可选值。 60 | 61 | 举个简单例子，如果要注册一个接入 CSV 数据的 Connector，则实现如下： 62 | 63 | ```js 64 | const _ = require('lodash'); 65 | const { csvParse } = require('d3-dsv'); 66 | const DataSet = require('@antv/data-set'); 67 | 68 | DataSet.registerConnector('csv', (data, options = {}) => { 69 | const delimiter = options.delimiter || ','; 70 | if (!isString(delimiter)) { 71 | throw new TypeError('Invalid delimiter: must be a string!'); 72 | } 73 | return dsvFormat(delimiter).parse(str); 74 | }); 75 | 76 | const testCSV = `Expt,Run,Speed 77 | 1,1,850 78 | 1,2,740 79 | 1,3,900 80 | 1,4,1070`; 81 | 82 | const dv = new DataSet.View().source(testCSV, { 83 | type: 'csv' 84 | }); 85 | 86 | console.log(dv.rows); 87 | /* 88 | * dv.rows: 89 | * [ 90 | * {Expt: " 1", Run: "1", Speed: "850"} 91 | * {Expt: " 1", Run: "2", Speed: "740"} 92 | * {Expt: " 1", Run: "3", Speed: "900"} 93 | * {Expt: " 1", Run: "4", Speed: "1070"} 94 | * ] 95 | */ 96 | ``` 97 | 98 | ### getConnector 99 | 100 | `DataSet.getConnector(name)` 返回 `name` 对应的 Connector。 101 | 102 | #### 参数 103 | 104 | - `name` **string** 105 | 106 | connector 的名称标识。 107 | 108 | #### 返回值 109 | Function 110 | 111 | ### registerTransform 112 | 113 | `DataSet.registerTransform(name, transform)` 注册一个数据处理函数，注册后所有数据视图都可以使用 `name` 来引用这个数据处理函数，从而进行某种数据处理。 114 | 115 | #### 参数 116 | 117 | - `name` **string** 118 | 119 | `transform` 的名称标识。 120 | 121 | - `transform` **Function** 122 | 123 | 对数据进行变换处理的函数，参数分别是 DataSet.View 实例 `dv` 和调用 transform 时指定的配置项 `options`。 124 | 125 | - `dv` **object** 126 | 127 | 数据视图，`DataSet.View` 的实例。 128 | 129 | - `options` **object** 130 | 131 | 调用数据视图的 `transform` 方法来进行转换时指定的配置项。 132 | 133 | 举个简单例子，如果要注册一个过滤数据的 Transform，则实现如下： 134 | 135 | ```js 136 | // 承接上述 Connector 的代码 137 | DataSet.registerTransform('filter', (dv, options = {}) => { 138 | dv.rows = dv.rows.filter(options.callback || (row => !!row)); 139 | }); 140 | 141 | dv.transform({ 142 | type: 'filter', 143 | callback(row) { 144 | return row.Run !== "1"; 145 | } 146 | }) 147 | 148 | console.log(dv.rows); 149 | /* 150 | * dv.rows: 151 | * [ 152 | * {Expt: " 1", Run: "2", Speed: "740"} 153 | * {Expt: " 1", Run: "3", Speed: "900"} 154 | * {Expt: " 1", Run: "4", Speed: "1070"} 155 | * ] 156 | */ 157 | ``` 158 | 159 | ### getTransform 160 | 161 | `DataSet.getTransform(name)` 返回 `name` 对应的 Transform。 162 | 163 | #### 参数 164 | 165 | - `name` **string** 166 | 167 | transform 的名称标识。 168 | 169 | #### 返回值 170 | 171 | `name` 对应的 `transform` 函数。 172 | 173 | ## 类 174 | 175 | ### DataSet 176 | 177 | 数据集构造函数。 178 | 179 | #### new DataSet() 180 | 181 | `new DataSet(options = {})` 创建并返回 DataSet 实例。具体参数见示例代码。 182 | 183 | | 参数 | 类型 | 是否可选 | 184 | | ---- | ---- | ---- | 185 | | options | Object | 是 | 186 | 187 | ```js 188 | const ds = new DataSet({ 189 | state: { // 指定初始化状态量 190 | foo: 'bar' 191 | } 192 | }); 193 | ``` 194 | 195 | #### ds.isDataSet 196 | 197 | 判断是否是 DataSet 时使用，`ds.isDataSet === true` 198 | 199 | #### ds.views 200 | 201 | 存储所有挂在数据集上的数据视图（key-value对）。 202 | 203 | #### ds.state 204 | 205 | 存储数据集上的状态量（key-value对）。 206 | 207 | #### ds.createView() 208 | 209 | > alias ds.view() 210 | 211 | `ds.createView([name, ]options = {})` 创建并返回一个数据视图实例。 212 | 213 | | 参数 | 类型 | 是否可选 | 214 | | ---- | ---- | ---- | 215 | | name | String | 是 | 216 | | options | Object | 是 | 217 | 218 | ```js 219 | const dv0 = ds.createView(); 220 | const dv1 = ds.createView('foo'); 221 | const dv2 = ds.createView('bar', { 222 | watchingStates: [ 'fakeState' ] 223 | }); 224 | ``` 225 | 226 | ##### options.watchingStates 227 | 228 | 创建数据视图实例时，传入的 `watchingStates` 是用于指定该数据视图监听的 `states` 状态量的。默认监听所有状态量（也就是任何状态量变更都会导致数据视图重新计算），如果指定为空数组 `[]`，则不监听任何状态量，如果指定为非空数组，则只监听数组元素对应的状态量变更。 229 | 230 | #### ds.getView() 231 | 232 | `ds.getView(name)` 返回 name 对应的数据视图实例。 233 | 234 | | 参数 | 类型 | 是否可选 | 235 | | ---- | ---- | ---- | 236 | | name | String | 否 | 237 | 238 | ```js 239 | const dv = ds.getView('foo'); 240 | ``` 241 | 242 | #### ds.setView() 243 | 244 | `ds.setView(name, dv)` 设置 name 对应的数据视图实例为 dv。 245 | 246 | | 参数 | 类型 | 是否可选 | 247 | | ---- | ---- | ---- | 248 | | name | String | 否 | 249 | | dv | DataSet.View | 否 | 250 | 251 | ```js 252 | ds.setView('foo', new DataSet.View()); 253 | ``` 254 | 255 | #### ds.setState() 256 | 257 | `ds.setState(name, value)` 设置状态量 name 的值为 value。 258 | 259 | > 注意！这个操作会使得关联了状态量 name 的数据视图对象重新执行所有数据处理流程。这个接口为数据集合上挂载的数据视图之间提供了通信通道。 260 | 261 | > 注意！更改状态量必须调用这个接口，而不能直接用 `ds.state.xxx = 'yyy'` 这种方式。 262 | 263 | | 参数 | 类型 | 是否可选 | 264 | | ---- | ---- | ---- | 265 | | name | String | 否 | 266 | | value | Any | 否 | 267 | 268 | ```js 269 | ds.setState('foo', 'bar'); 270 | ``` 271 | 272 | #### ds.on() 273 | 274 | `ds.on(name, callback)` 监听数据集上的 name 事件。 275 | 276 | | 参数 | 类型 | 是否可选 | 277 | | ---- | ---- | ---- | 278 | | name | String | 否 | 279 | | callback | Function | 否 | 280 | 281 | 目前支持的事件有 282 | 283 | - `statechange` 状态量变化事件，在调用 `setState()` 方法后触发。 284 | 285 | > 注意！这个事件在状态量改变后不是同步触发的，而是在 setState 被调用后**异步触发**的。 286 | 287 | > 目前搜索监听了某个 state 值的数据视图自动监听这个事件。 288 | 289 | ```js 290 | ds.on('statechange', (name, value) => { 291 | console.log(`state ${name}'s value has been changed to ${value}!`) 292 | }); 293 | ``` 294 | 295 | #### ds.emit() 296 | 297 | `ds.emit(name, ..params)` 手动触发数据集上的 name 事件。 298 | 299 | | 参数 | 类型 | 是否可选 | 300 | | ---- | ---- | ---- | 301 | | name | String | 否 | 302 | | params | Arguments | 是 | 303 | 304 | 目前支持的事件有 305 | 306 | - `statechange` 状态量变化事件，触发后状态量关联的数据视图会重新执行所有数据处理流程。 307 | 308 | ### DataSet.View 309 | 310 | > alias DataSet.DataView 311 | 312 | 数据视图构造函数。 313 | 314 | #### new View() 315 | 316 | `const dv = new DataSet.View(ds, options = {})` 创建并返回数据视图实例，具体参数见代码。 317 | 318 | | 参数 | 类型 | 是否可选 | 319 | | ---- | ---- | ---- | 320 | | ds | DataSet | 是 | 321 | | options | Object | 是 | 322 | 323 | ```js 324 | const dv0 = new DataSet.View(); 325 | const dv1 = new DataSet.View(ds, { 326 | watchingStates: [ 'foo' ] // 监听 `foo` 状态量变化，默认监听 ds 上的所有状态量 327 | }); 328 | ``` 329 | 330 | #### dv.isView 331 | 332 | > alias dv.isDataView 333 | 334 | #### dv.loose 335 | 336 | 是否关联了数据集。`ds.createView()`方式创建的数据视图实例为 `false`，`new DataSet.View(options)` 方式创建的则为 `true`。 337 | 338 | #### dv.dataType 339 | 340 | 数据类型，默认为 `DataSet.TABLE`，可选值有：`DataSet.TABLE`（普通二维数据），`DataSet.GEO`（地理数据）， `DataSet.HIERARCHY`（树结构数据），和`DataSet.GRAPH`（图数据）。 341 | 342 | #### dv.origin 343 | 344 | 存储原始数据。 345 | 346 | #### dv.rows 347 | 348 | 存储处理后的数据。 349 | 350 | #### dv.transforms 351 | 352 | 存储已应用的 transform（数组）。 353 | 354 | #### dv.source() 355 | 356 | `dv.source(data, options)` 载入数据。 357 | 358 | | 参数 | 类型 | 是否可选 | 359 | | ---- | ---- | ---- | 360 | | data | String / Array / Object / DataView | 否 | 361 | | options | Object | 是 | 362 | 363 | `data` 是原始数据，可能是字符串，也可能是数组、对象，或者另一个数据视图实例。`options` 里指定了载入数据使用的 `connector` 和载入时使用的配置项。 364 | 365 | 详细文档见 [Connector API](./connector.html) 366 | 367 | #### dv.transform() 368 | 369 | `dv.transform(options)` 执行数据处理数据。执行完这个函数后，transform会被 370 | 371 | | 参数 | 类型 | 是否可选 | 372 | | ---- | ---- | ---- | 373 | | options | Object | 否 | 374 | 375 | `options` 里指定了处理数据使用的 `transform` 和数据处理的配置项。 376 | 377 | 详细文档见 [Transform API](./transform.html) 378 | 379 | ## 方法 Functions 380 | 381 | ### DataSet.registerConnector() 382 | 383 | `DataSet.registerConnector(name, callback)` 注册一个数据连接函数，注册后所有数据视图都可以使用 `name` 来引用这个数据连接函数，从而接入某种数据源。 384 | 385 | | 参数 | 类型 | 是否可选 | 386 | | ---- | ---- | ---- | 387 | | name | String | 否 | 388 | | callback | Function | 否 | 389 | 390 | `callback` 接受两个参数：原始数据和配置项。返回值就是 DataView 实例所需要的数据。举个简单例子，如果要注册一个接入 CSV 数据的 Connector，则实现如下： 391 | 392 | ```js 393 | const _ = require('lodash'); 394 | const { 395 | csvParse 396 | } = require('d3-dsv'); 397 | 398 | DataSet.registerConnector('csv', (data, options = {}) => { 399 | const delimiter = options.delimiter || ','; 400 | if (!isString(delimiter)) { 401 | throw new TypeError('Invalid delimiter: must be a string!'); 402 | } 403 | return dsvFormat(delimiter).parse(str); 404 | }); 405 | 406 | const testCSV = `Expt,Run,Speed 407 | 1,1,850 408 | 1,2,740 409 | 1,3,900 410 | 1,4,1070`; 411 | 412 | const dv = new DataSet.View().source(testCSV, { 413 | type: 'csv' 414 | }); 415 | 416 | console.log(dv.rows); 417 | /* 418 | * dv.rows: 419 | * [ 420 | * {Expt: " 1", Run: "1", Speed: "850"} 421 | * {Expt: " 1", Run: "2", Speed: "740"} 422 | * {Expt: " 1", Run: "3", Speed: "900"} 423 | * {Expt: " 1", Run: "4", Speed: "1070"} 424 | * ] 425 | */ 426 | ``` 427 | 428 | ### DataSet.getConnector() 429 | 430 | `DataSet.getConnector(name)` 返回 `name` 对应的 Connector。 431 | 432 | | 参数 | 类型 | 是否可选 | 433 | | ---- | ---- | ---- | 434 | | name | String | 否 | 435 | 436 | ### DataSet.registerTransform() 437 | 438 | `DataSet.registerTransform(name, callback)` 注册一个数据处理函数，注册后所有数据视图都可以使用 `name` 来引用这个数据处理函数，从而进行某种数据处理。 439 | 440 | | 参数 | 类型 | 是否可选 | 441 | | ---- | ---- | ---- | 442 | | name | String | 否 | 443 | | callback | Function | 否 | 444 | 445 | `callback` 接受两个参数：数据视图（DataSet.View）实例和配置项。举个简单例子，如果要注册一个过滤数据的 Transform，则实现如下： 446 | 447 | ```js 448 | // 承接上述 Connector 的代码 449 | DataSet.registerTransform('filter', (dv, options = {}) => { 450 | dv.rows = dv.rows.filter(options.callback || (row => !!row)); 451 | }); 452 | 453 | dv.transform({ 454 | type: 'filter', 455 | callback(row) { 456 | return row.Run !== "1"; 457 | } 458 | }) 459 | 460 | console.log(dv.rows); 461 | /* 462 | * dv.rows: 463 | * [ 464 | * {Expt: " 1", Run: "2", Speed: "740"} 465 | * {Expt: " 1", Run: "3", Speed: "900"} 466 | * {Expt: " 1", Run: "4", Speed: "1070"} 467 | * ] 468 | */ 469 | ``` 470 | 471 | ### DataSet.getTransform() 472 | 473 | `DataSet.getTransform(name)` 返回 `name` 对应的 Transform。 474 | 475 | | 参数 | 类型 | 是否可选 | 476 | | ---- | ---- | ---- | 477 | | name | String | 否 | 478 | -------------------------------------------------------------------------------- /bizCharts/zh/api/legend.md: -------------------------------------------------------------------------------- 1 | 2 | # Legend 3 | 4 | ## 什么是图例 5 | 6 | > 图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。G2 会根据设置图形属性映射以及数据的类型自动生成不同的图例。 7 | > shape, color, size 只有当 `` 组件上有这三个属性中任意一个时，并且将 `` 组件的 name 属性跟这个属性的字段关联上，才会显示图例； 8 | 9 | * shape 属性，会根据不同的 shape 类型生成图例； 10 | * color 属性, 会赋予不同的图例项不同的颜色来区分图形； 11 | * size 属性, 在图例上显示图形的大小。 12 | 13 | 14 | ![image | center](https://zos.alipayobjects.com/skylark/9f146402-1e62-4029-b3b8-3d32029af1d6/attach/2378/eb826d75a0bb34cb/image.png "") 15 | 16 | 17 | ## 父组件 18 | [``](chart) 19 | 20 | ## 子组件 21 | 无 22 | 23 | ## 使用说明 24 | * 图表默认不显示图例,只有置了``才会展示图例。 25 | 26 | ```js 27 | // Basic Usage 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | * 使用 `` 组件时，可以指定当前图例对应数据源中的字段名（字段名为name），不指定则默认设置所有图例； 35 | 36 | 37 | ```js 38 | // 指定图例对应数据源中的字段名 39 | 40 | // Geom 组件上必须有 `shape, color, size `中某个属性值为 genre 字段，才会有图例出现。 41 | 42 | 43 | 44 | 45 | // 不指定图例对应数据源中的字段名，则默认设置所有图例 46 | 47 | 48 | // Geom 组件上必须有 `shape, color, size `中某个属性值为 genre 字段，才会有图例出现。 49 | 50 | 51 | ``` 52 | 53 | * 一旦使用 `` 组件，那么所有的图例都会显示，如若需要隐藏某一个图例，将 visible 参数配置为 false，如下所示： 54 | 55 | ```html 56 | 57 | 58 | 59 | 60 | 61 | 62 | ``` 63 | 64 | ## API 65 | 66 | 分类类型和连续类型的配置有一定的区别，下面列出了这两种类型支持的可配置的属性： 67 | 68 | ### 分类图例、· 69 | ![image | center](https://img.alicdn.com/tfs/TB1roBwhrYI8KJjy0FaXXbAiVXa-450-232.png "") 70 | 71 | #### `name` 72 | * 类型：String 73 | * 描述：图例的对应到数据源中的数据字段名，不传则默认设置所有图例。 74 | 75 | #### `visible` 76 | * 类型：Boolean 77 | * 描述：图例是否可见,默认值:true。 78 | 79 | #### `position` 80 | * 类型：String 81 | * 描述：设置图例的显示位置，可设置的值有12个：`left-top`,`left-center`,`left-bottom`,`right-top`,`right-bottom`, `right-center`,`top-left`,`top-center`,`top-bottom`,`bottom-left`,`bottom-center`,`bottom-right`。也可使用`bottom`,`top`,`left`,`right`设置位置，此时对应的值分别为`bottom-center`,`top-center`,`left-bottom`,`right-bottom`。 82 | * 默认值: bottom-center。 83 | [demo链接](../demo/detail?id=other-legend-position&selectedKey=%E5%85%B6%E4%BB%96%E5%9B%BE%E8%A1%A8) 84 | 85 | #### `layout` 86 | * 类型: String 87 | * 描述: 对分类类型的图例生效，用于设置各个图例项的排列方式，可设置值包括：vertical、horizontal，分别表示垂直和水平排布。 88 | 89 | #### `title` 90 | * 类型: Boolean | Object 91 | * 描述: 图例标题的显示样式设置，如果值为 null，表示不展示图例标题，默认不展示。 92 | ```js 93 | 94 | 102 | 103 | 104 | ``` 105 | 106 | #### `offsetX` 107 | * 类型：Number 108 | * 描述：图例 x 方向的偏移值，数值类型，数值单位为 'px'，默认值为 0。 109 | 110 | #### `offsetY` 111 | * 类型：Number 112 | * 描述：图例 Y 方向的偏移值，数值类型，数值单位为 'px'，默认值为 0。 113 | 114 | #### `itemGap` 115 | * 类型: Number 116 | * 描述: 对分类类型的图例生效，表示图例每项之间的间距，如果是水平排布则为左右间距，如果是竖直排布则为上下间距。 117 | 118 | #### `itemMarginBottom` 119 | * 类型：Number 120 | * 描述：对分类类型的图例生效，表示各个图例项垂直方向的间距。 121 | 122 | #### `itemWidth` 123 | * 类型：Number 124 | * 描述：对分类类型的图例生效，设置图例项的宽度，当图例有很多图例项，并且用户想要这些图例项能垂直对齐时，此时这个属性可帮用户实现此效果。 125 | ![](https://img.alicdn.com/tfs/TB1HzWCuwHqK1RjSZJnXXbNLpXa-1718-894.png) 126 | 127 | 128 | #### `unCheckColor ` 129 | * 类型：String 130 | * 描述：对分类类型的图例生效，用于取消选中的图例文本颜色。 131 | 132 | #### `background` 133 | * 类型：Number 134 | * 描述：对分类类型的图例生效，用于设置图例的背景样式。 135 | ```js 136 | 140 | ``` 141 | 142 | #### `allowAllCanceled` 143 | * 类型：Boolean 144 | * 描述：对分类类型的图例生效，表示是否允许所有图例项被取消选中，默认为 false，即必须保留一个被选中的图例项。 145 | 146 | #### `itemFormatter` 147 | * 类型：Function 148 | * 描述：回调函数，用于格式化图例每项的文本显示。 149 | ```js 150 | 155 | 156 | ``` 157 | 158 | 159 | #### `marker` 160 | * 类型：String | Function 161 | * 描述：对分类类型的图例生效，用于设置图例的 marker 样式，默认按照 geom 的类型显示。 162 | 163 | - 当为 string 类型时，可选项如下: 164 | 165 | | type | shape | 166 | |------|-------| 167 | | circle | ![](https://antv.alipay.com/assets/image/g2/tutorial/circle.png)| 168 | |square |![](https://antv.alipay.com/assets/image/g2/tutorial/square.png)| 169 | |bowtie |![](https://antv.alipay.com/assets/image/g2/tutorial/bowtie.png)| 170 | |diamond |![](https://antv.alipay.com/assets/image/g2/tutorial/diamond.png)| 171 | |hexagon |![](https://antv.alipay.com/assets/image/g2/tutorial/hexagon.png)| 172 | |triangle|![](https://antv.alipay.com/assets/image/g2/tutorial/triangle.png)| 173 | |triangle-down|![](https://antv.alipay.com/assets/image/g2/tutorial/triangle-down.png)| 174 | |tick|![](https://antv.alipay.com/assets/image/g2/tutorial/tick.png)| 175 | |plus|![](https://antv.alipay.com/assets/image/g2/tutorial/plus.png)| 176 | |hyphen|![](https://antv.alipay.com/assets/image/g2/tutorial/hyphen.png)| 177 | |line|![](https://antv.alipay.com/assets/image/g2/tutorial/line.png)| 178 | |hollowCircle|![](https://antv.alipay.com/assets/image/g2/tutorial/hollowCircle.png)| 179 | |hollowSquare|![](https://antv.alipay.com/assets/image/g2/tutorial/hollowSquare.png)| 180 | |hollowBowtie|![](https://antv.alipay.com/assets/image/g2/tutorial/hollowBowtie.png)| 181 | |hollowDiamond|![](https://antv.alipay.com/assets/image/g2/tutorial/hollowDiamond.png)| 182 | |hollowHexagon|![](https://antv.alipay.com/assets/image/g2/tutorial/hollowHexagon.png)| 183 | |hollowTriangle|![](https://antv.alipay.com/assets/image/g2/tutorial/hollowTriangle.png)| 184 | |hollowTriangle-down|![](https://antv.alipay.com/assets/image/g2/tutorial/hollowTriangle-down.png)| 185 | 186 | - 当为 Function 时，可以自定义 shape 图形，使用方式如下: 187 | ```js 188 | /** 189 | * 自定义 marker 形状 190 | * @param {number} x 该 marker 的横轴坐标 191 | * @param {number} y 该 marker 的纵轴坐标 192 | * @param {number} r 该 marker 的半径大小 193 | * @return {null} 194 | */ 195 | marker = {(x, y, r) => { 196 | }} 197 | ``` 198 | 以下代码绘制了如图所示的 marker: ![marker](https://img.alicdn.com/tfs/TB1nDDhuiAnBKNjSZFvXXaTKXXa-40-32.png) 199 | 200 | ```js 201 | marker = {(x, y, r) => { 202 | return [ 203 | [ 'M', x - r, y ], 204 | [ 'L', x + r, y ] 205 | ]; 206 | }} 207 | ``` 208 | 209 | 210 | #### `textStyle` 211 | * 类型：Object 212 | * 描述：图例的背景样式配置。参考[绘图属性](./graphic)Text的样式 213 | 214 | ```js 215 | 223 | ``` 224 | 225 | #### `attachLast` 226 | * 类型: Boolean 227 | * 描述: 是否启用尾部跟随图例(tail-legend)，尾部跟随图例自动跟随geom的最后一个数据点，适用的图表类型为line、stackLine、area、stackArea。默认为 false ，即不启用。 228 | 229 | #### `clickable` 230 | * 类型：Boolean 231 | * 描述：对分类类型的图例生效，设置图例项是否允许点击，默认为 true，即允许点击。 232 | 233 | #### `hoverable` 234 | * 类型：Boolean 235 | * 描述：对分类类型的图例生效，设置是否开启鼠标 hover 至图例的交互效果，默认为 true，即开启动画。 236 | 237 | #### `selectedMode` 238 | * 类型：String ，可选'single' | 'multiple' 239 | * 描述：针对分类类型图例，当 clickable 为 true 时该配置项生效，用于设置图例的选中交互模式，可配置的属性: 240 | - selectedMode: 'single'：表示开启单选模式； 241 | - selectedMode: 'multiple'：表示开启多选模式，默认为 multiple。 242 | 243 | #### `onHover` 244 | * 类型：Function 245 | * 描述：针对分类类型的图例，用于自定义鼠标 hover 图例项的交互，当 hoverable 为 false 不生效。 246 | ```js 247 | // 自定义图例项鼠标 hover 事件，hoverable 为 false 不生效 248 | {}}/> 249 | ``` 250 | 251 | #### `onClick` 252 | * 类型：Function 253 | * 描述：针对分类类型的图例，用于自定义鼠标点击图例项的交互，当 clickable 为 false 不生效。 254 | ```js 255 | // 自定义图例项点击事件， clickable 为 false 不生效 256 | {}}/> 257 | ``` 258 | ## 分类 html 自定义图例 259 | 260 | 分类 html 自定义图例大部分属性跟分类图例是一样的，需要额外设置以下属性。 261 | 262 | #### `useHtml` 263 | * 类型：Boolean | Function 264 | * 描述：针对分类类型图例，用于开启是否使用 html 渲染图例，默认为 false，true 表示使用 html 渲染图例。 265 | 266 | #### `container` 267 | * 类型：String 268 | * 描述：当 useHtml 为 true 时生效，用于指定生成图例的 dom 容器，那么该值必须为 dom 容器的 id 值为分类类型的话，则支持传入索引值。 269 | 270 | #### `containerTpl` 271 | * 类型：String 272 | * 描述：当 useHtml 为 true 时生效，用于指定图例容器的模板，默认值如下： 273 | ```js 274 | ' 276 | + '

' 277 | + '

' 278 | + ''} 279 | /> 280 | ``` 281 | #### `itemTpl` 282 | * 类型：String | Function 283 | * 描述：当 useHtml 为 true 时生效，用于指定生成图例的图例项 html 模板，默认值如下： 284 | ```js 285 | ' 287 | + '' 288 | + '{value}' 289 | + ''} 290 | /> 291 | ``` 292 | > !注意：自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。 293 | 294 | #### g2-legend 295 | #### g2-legend-item 296 | #### g2-legend-list-item 297 | #### g2-legend-marker 298 | #### g2-legend-text 299 | * 类型： Object 300 | * 描述：当用户使用html时，可以通过向组件传递 html原生支持的的class名来修改模板样式； 301 | ```js 302 | 312 | ``` 313 | 314 | #### `scroll` 315 | * 类型：Boolean 316 | * 描述：当用户使用 html 的时候，超出高度或者宽度会自动换行。 317 | 318 | ### 连续图例 319 | 连续图例部分属性跟分类图例是一样的(`name`, `position`, `offsetX`, `offsetY`, `title`)，需要额外设置以下属性。 320 | 321 | #### `sizeType` 322 | * 类型：'circle' | 'normal' | 'null' 323 | * 描述：针对连续的大小图例，设置图例是否是针对节点大小映射的样式。 324 | 325 | 当为 circle 时的样式： 326 | 327 | ![](https://img.alicdn.com/tfs/TB1RGWyuwDqK1RjSZSyXXaxEVXa-418-138.png) 328 | 329 | 当为 normal 时的样式： 330 | 331 | ![](https://img.alicdn.com/tfs/TB1n4uCuCzqK1RjSZFHXXb3CpXa-442-116.png) 332 | 333 | #### `slidable` 334 | * 类型：Boolean 335 | * 描述：针对连续图例，用于设置连续图例是否允许滑动，默认为 true，即开启滑动操作。 336 | 337 | #### `width` 338 | * 类型：Number 339 | * 描述：针对连续图例，用于设置图例的宽度。 340 | 341 | #### `height` 342 | * 类型：Number 343 | * 描述：针对连续图例，用于设置图例的高度。 344 | 345 | ### 自定义混合图例 346 | 自定义图例大部分属性跟普通图例一样，需要额外配置的属性有。 347 | 348 | #### `custom` 349 | * 类型：Boolean 350 | * 描述：默认为 false，当 custom 为 true，表示不使用默认生成的图例，允许用户自定义图例，包括具体的图例项以及 click、hover 交互。 351 | 352 | 自定义图例时需要用户自己声明具体的图例项 items(该属性是一个对象数组，数组中每一项为一个对象类型，结构为： { value: '', marker:{fill: 'red'}})以及图例项的 hover 和 click 事件。 353 | 354 | [示例](../demo/detail?id=g2-double-axes&selectedKey=概览) 355 | 356 | 357 | #### `items` 358 | * 类型：Object 359 | * 描述：自定义图例的配置。需要用户自己声明具体的图例项（每个图例项结构为 { value: '', fill: '', marker: '' }）以及图例项的 hover 和 click 事件。 360 | 361 | ```js 362 | {}} // 自定义 hover 事件 370 | onClick={ev => {}} // 自定义 click 事件 371 | /> 372 | ``` 373 | 374 | [示例](../demo/detail?id=g2-double-axes&selectedKey=概览) 375 | 376 | 377 | ```html 378 | // 略... 379 | 380 | 381 | `${val}°C`}}/> 382 | 383 | 384 | 385 | 386 | 387 | ``` 388 | ![image | left ](https://img.alicdn.com/tfs/TB1..5Ma8fH8KJjy1XbXXbLdXXa-1600-856.png) -------------------------------------------------------------------------------- /bizCharts/zh/api/theme.md: -------------------------------------------------------------------------------- 1 | 2 | # Theme 3 | 以下是默认主题的详细样式，你可以根据这些主题样式属性自定义主题。 4 | 5 | ```js 6 | const DEFAULT_COLOR = '#1890FF'; 7 | const COLOR_PLATE_8 = [ '#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864' ]; 8 | const COLOR_PLATE_16 = [ '#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#8543E0', 9 | '#5C8EE6', '#13C2C2', '#5CA3E6', '#3436C7', '#B381E6', '#F04864', '#D598D9' ]; 10 | const COLOR_PLATE_24 = [ '#1890FF', '#66B5FF', '#41D9C7', '#2FC25B', '#6EDB8F', '#9AE65C', '#FACC14', '#E6965C', 11 | '#57AD71', '#223273', '#738AE6', '#7564CC', '#8543E0', '#A877ED', '#5C8EE6', '#13C2C2', '#70E0E0', '#5CA3E6', 12 | '#3436C7', '#8082FF', '#DD81E6', '#F04864', '#FA7D92', '#D598D9' ]; 13 | const COLOR_PIE = [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273' ]; 14 | const COLOR_PIE_16 = [ '#1890FF', '#73C9E6', '#13C2C2', '#6CD9B3', '#2FC25B', '#9DD96C', '#FACC14', '#E6965C', 15 | '#F04864', '#D66BCA', '#8543E0', '#8E77ED', '#3436C7', '#737EE6', '#223273', '#7EA2E6' ]; 16 | 17 | const FONT_FAMILY = '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, "sans-serif"'; 18 | // tooltip's dom element classname 19 | const TOOLTIP_CONTAINER_CLASS = 'g2-tooltip'; 20 | const TOOLTIP_TITLE_CLASS = 'g2-tooltip-title'; 21 | const TOOLTIP_LIST_CLASS = 'g2-tooltip-list'; 22 | const TOOLTIP_LIST_ITEM_CLASS = 'g2-tooltip-list-item'; 23 | const TOOLTIP_MARKER_CLASS = 'g2-tooltip-marker'; 24 | 25 | const Theme = { 26 | defaultColor: DEFAULT_COLOR, // default theme color 27 | plotCfg: { 28 | padding: [ 20, 20, 95, 80 ] 29 | }, 30 | fontFamily: FONT_FAMILY, 31 | defaultLegendPosition: 'bottom', 32 | colors: COLOR_PLATE_8, 33 | colors_16: COLOR_PLATE_16, 34 | colors_24: COLOR_PLATE_24, 35 | colors_pie: COLOR_PIE, 36 | colors_pie_16: COLOR_PIE_16, 37 | shapes: { 38 | point: [ 'hollowCircle', 'hollowSquare', 'hollowDiamond', 'hollowBowtie', 'hollowTriangle', 39 | 'hollowHexagon', 'cross', 'tick', 'plus', 'hyphen', 'line' ], 40 | line: [ 'line', 'dash', 'dot' ], 41 | area: [ 'area' ] 42 | }, 43 | markerRadius: 4, 44 | sizes: [ 1, 10 ], 45 | opacities: [ 0.1, 0.9 ], 46 | axis: { 47 | top: { 48 | position: 'top', 49 | title: null, 50 | label: { 51 | offset: 14, 52 | textStyle: { 53 | fill: '#545454', 54 | fontSize: 12, 55 | lineHeight: 20, 56 | textBaseline: 'middle' 57 | }, 58 | autoRotate: true 59 | }, 60 | line: { 61 | lineWidth: 1, 62 | stroke: '#BFBFBF' 63 | }, 64 | tickLine: { 65 | lineWidth: 1, 66 | stroke: '#BFBFBF', 67 | length: 4 68 | } 69 | }, 70 | bottom: { 71 | position: 'bottom', 72 | title: null, 73 | label: { 74 | offset: 22, 75 | autoRotate: true, 76 | textStyle: { 77 | fill: '#545454', 78 | fontSize: 12, 79 | lineHeight: 20, 80 | textBaseline: 'middle' 81 | } 82 | }, 83 | line: { 84 | lineWidth: 1, 85 | stroke: '#BFBFBF' 86 | }, 87 | tickLine: { 88 | lineWidth: 1, 89 | stroke: '#BFBFBF', 90 | length: 4 91 | } 92 | }, 93 | left: { 94 | position: 'left', 95 | title: null, 96 | label: { 97 | offset: 12, 98 | autoRotate: true, 99 | textStyle: { 100 | fill: '#545454', 101 | fontSize: 12, 102 | lineHeight: 20, 103 | textBaseline: 'middle' 104 | } 105 | }, 106 | line: null, 107 | tickLine: null, 108 | grid: { 109 | lineStyle: { 110 | stroke: '#E9E9E9', 111 | lineWidth: 1, 112 | lineDash: [ 3, 3 ] 113 | }, 114 | hideFirstLine: true 115 | } 116 | }, 117 | right: { 118 | position: 'right', 119 | title: null, 120 | label: { 121 | offset: 12, 122 | autoRotate: true, 123 | textStyle: { 124 | fill: '#545454', 125 | fontSize: 12, 126 | lineHeight: 20, 127 | textBaseline: 'middle' 128 | } 129 | }, 130 | line: null, 131 | tickLine: null, 132 | grid: { 133 | lineStyle: { 134 | stroke: '#E9E9E9', 135 | lineWidth: 1, 136 | lineDash: [ 3, 3 ] 137 | }, 138 | hideFirstLine: true 139 | } 140 | }, 141 | circle: { 142 | zIndex: 1, 143 | title: null, 144 | label: { 145 | offset: 12, 146 | textStyle: { 147 | fill: '#545454', 148 | fontSize: 12, 149 | lineHeight: 20 150 | } 151 | }, 152 | line: { 153 | lineWidth: 1, 154 | stroke: '#BFBFBF' 155 | }, 156 | tickLine: { 157 | lineWidth: 1, 158 | stroke: '#BFBFBF', 159 | length: 4 160 | }, 161 | grid: { 162 | lineStyle: { 163 | stroke: '#E9E9E9', 164 | lineWidth: 1, 165 | lineDash: [ 3, 3 ] 166 | }, 167 | hideFirstLine: true 168 | } 169 | }, 170 | radius: { 171 | zIndex: 0, 172 | label: { 173 | offset: 12, 174 | textStyle: { 175 | fill: '#545454', 176 | fontSize: 12, 177 | textBaseline: 'middle', 178 | lineHeight: 20 179 | } 180 | }, 181 | line: { 182 | lineWidth: 1, 183 | stroke: '#BFBFBF' 184 | }, 185 | tickLine: { 186 | lineWidth: 1, 187 | stroke: '#BFBFBF', 188 | length: 4 189 | }, 190 | grid: { 191 | lineStyle: { 192 | stroke: '#E9E9E9', 193 | lineWidth: 1, 194 | lineDash: [ 3, 3 ] 195 | }, 196 | type: 'circle' 197 | } 198 | }, 199 | helix: { 200 | grid: null, 201 | label: null, 202 | title: null, 203 | line: { 204 | lineWidth: 1, 205 | stroke: '#BFBFBF' 206 | }, 207 | tickLine: { 208 | lineWidth: 1, 209 | length: 4, 210 | stroke: '#BFBFBF' 211 | } 212 | } 213 | }, 214 | label: { 215 | offset: 20, 216 | textStyle: { 217 | fill: '#545454', 218 | fontSize: 12, 219 | textBaseline: 'middle' 220 | } 221 | }, 222 | treemapLabels: { 223 | offset: 10, 224 | textStyle: { 225 | fill: '#fff', 226 | fontSize: 12, 227 | textBaseline: 'top', 228 | fontStyle: 'bold' 229 | } 230 | }, 231 | innerLabels: { 232 | textStyle: { 233 | fill: '#fff', 234 | fontSize: 12, 235 | textBaseline: 'middle' 236 | } 237 | }, 238 | // 在theta坐标系下的饼图文本内部的样式 239 | thetaLabels: { 240 | labelLine: { 241 | lineWidth: 1 242 | }, 243 | labelHeight: 14, 244 | offset: 30 245 | }, 246 | legend: { 247 | right: { 248 | position: 'right', 249 | layout: 'vertical', 250 | itemMarginBottom: 8, 251 | width: 16, 252 | height: 156, 253 | title: null, 254 | textStyle: { 255 | fill: '#8C8C8C', 256 | fontSize: 12, 257 | textAlign: 'start', 258 | textBaseline: 'middle', 259 | lineHeight: 20 260 | }, // 图例项文本的样式 261 | unCheckColor: '#bfbfbf' 262 | }, 263 | left: { 264 | position: 'left', 265 | layout: 'vertical', 266 | itemMarginBottom: 8, 267 | width: 16, 268 | height: 156, 269 | title: null, 270 | textStyle: { 271 | fill: '#8C8C8C', 272 | fontSize: 12, 273 | textAlign: 'start', 274 | textBaseline: 'middle', 275 | lineHeight: 20 276 | }, // 图例项文本的样式 277 | unCheckColor: '#bfbfbf' 278 | }, 279 | top: { 280 | position: 'top', 281 | offset: 6, 282 | layout: 'horizontal', 283 | title: null, 284 | itemGap: 10, 285 | width: 156, 286 | height: 16, 287 | textStyle: { 288 | fill: '#8C8C8C', 289 | fontSize: 12, 290 | textAlign: 'start', 291 | textBaseline: 'middle', 292 | lineHeight: 20 293 | }, // 图例项文本的样式 294 | unCheckColor: '#bfbfbf' 295 | }, 296 | bottom: { 297 | position: 'bottom', 298 | offset: 58, 299 | layout: 'horizontal', 300 | title: null, 301 | itemGap: 24, 302 | width: 156, 303 | height: 16, 304 | textStyle: { 305 | fill: '#8C8C8C', 306 | fontSize: 12, 307 | textAlign: 'start', 308 | textBaseline: 'middle', 309 | lineHeight: 20 310 | }, 311 | unCheckColor: '#bfbfbf' 312 | } 313 | }, 314 | tooltip: { 315 | crosshairs: false, 316 | offset: 15, 317 | // css style for tooltip 318 | [`${TOOLTIP_CONTAINER_CLASS}`]: { 319 | position: 'absolute', 320 | visibility: 'hidden', 321 | whiteSpace: 'nowrap', 322 | zIndex: 999, 323 | transition: 'visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1)', 324 | backgroundColor: 'rgba(0, 0, 0, 0.65)', 325 | borderRadius: '4px', 326 | color: 'rgb(255, 255, 255)', 327 | fontSize: '12px', 328 | fontFamily: FONT_FAMILY, 329 | lineHeight: '20px', 330 | padding: '10px 10px 6px 10px' 331 | }, 332 | [`${TOOLTIP_TITLE_CLASS}`]: { 333 | marginBottom: '4px' 334 | }, 335 | [`${TOOLTIP_LIST_CLASS}`]: { 336 | margin: 0, 337 | listStyleType: 'none', 338 | padding: 0 339 | }, 340 | [`${TOOLTIP_LIST_ITEM_CLASS}`]: { 341 | marginBottom: '4px' 342 | }, 343 | [`${TOOLTIP_MARKER_CLASS}`]: { 344 | width: '7px', 345 | height: '7px', 346 | borderRadius: '50%', 347 | border: '1px solid #fff', 348 | display: 'inline-block', 349 | marginRight: '8px' 350 | } 351 | }, 352 | tooltipMarker: { 353 | symbol: (x, y, r, ctx, marker) => { 354 | const color = marker.get('color'); 355 | ctx.fillStyle = color; 356 | ctx.beginPath(); 357 | ctx.arc(x, y, r, 0, Math.PI * 2, false); 358 | ctx.fill(); 359 | 360 | ctx.save(); 361 | ctx.beginPath(); 362 | ctx.fillStyle = '#fff'; 363 | ctx.strokeStyle = color; 364 | ctx.globalAlpha = 0.3; 365 | ctx.lineWidth = 4; 366 | ctx.arc(x, y, 7, 0, Math.PI * 2, false); 367 | ctx.stroke(); 368 | ctx.restore(); 369 | }, 370 | radius: 4 371 | }, 372 | tooltipCrosshairsRect: { 373 | type: 'rect', 374 | style: { 375 | fill: '#CCD6EC', 376 | opacity: 0.3 377 | } 378 | }, 379 | tooltipCrosshairsLine: { 380 | style: { 381 | stroke: 'rgba(0, 0, 0, 0.25)', 382 | lineWidth: 1 383 | } 384 | }, 385 | shape: { 386 | point: { 387 | lineWidth: 1, 388 | fill: DEFAULT_COLOR, 389 | radius: 4 390 | }, 391 | hollowPoint: { 392 | fill: '#fff', 393 | lineWidth: 1, 394 | stroke: DEFAULT_COLOR, 395 | radius: 3 396 | }, 397 | interval: { 398 | lineWidth: 0, 399 | fill: DEFAULT_COLOR, 400 | fillOpacity: 0.85 401 | }, 402 | pie: { 403 | lineWidth: 1, 404 | stroke: '#fff' 405 | }, 406 | hollowInterval: { 407 | fill: '#fff', 408 | stroke: DEFAULT_COLOR, 409 | fillOpacity: 0, 410 | lineWidth: 1 411 | }, 412 | area: { 413 | lineWidth: 0, 414 | fill: DEFAULT_COLOR, 415 | fillOpacity: 0.3 416 | }, 417 | polygon: { 418 | lineWidth: 0, 419 | fill: DEFAULT_COLOR, 420 | fillOpacity: 1 421 | }, 422 | hollowPolygon: { 423 | fill: '#fff', 424 | stroke: DEFAULT_COLOR, 425 | fillOpacity: 0, 426 | lineWidth: 1 427 | }, 428 | hollowArea: { 429 | fill: '#fff', 430 | stroke: DEFAULT_COLOR, 431 | fillOpacity: 0, 432 | lineWidth: 1 433 | }, 434 | line: { 435 | stroke: DEFAULT_COLOR, 436 | lineWidth: 2, 437 | fill: null 438 | } 439 | }, 440 | guide: { 441 | line: { 442 | lineStyle: { 443 | stroke: DEFAULT_COLOR, 444 | lineDash: [ 0, 2, 2 ], 445 | lineWidth: 1 446 | }, 447 | text: { 448 | position: 'end', 449 | autoRotate: true, 450 | style: { 451 | fill: '#545454', 452 | fontSize: 12, 453 | textAlign: 'center' 454 | } 455 | } 456 | }, 457 | text: { 458 | style: { 459 | fill: '#545454', 460 | fontSize: 12, 461 | textBaseline: 'middle', 462 | textAlign: 'start' 463 | } 464 | }, 465 | region: { 466 | style: { 467 | lineWidth: 0, 468 | fill: '#000', 469 | fillOpacity: 0.04 470 | } 471 | }, 472 | html: { 473 | alignX: 'middle', 474 | alignY: 'middle' 475 | } 476 | }, 477 | pixelRatio: null 478 | }; 479 | ``` 480 | -------------------------------------------------------------------------------- /bizCharts/zh/api/guide.md: -------------------------------------------------------------------------------- 1 | # Guide 2 | 3 | 用于绘制图表的辅助元素。 4 | 5 |

6 | 7 | ## 使用说明 8 | ### 父组件 9 | [``](chart) [``](view) 10 | 11 | ### 子组件 12 | 13 | | 组件 | 说明 | 14 | | :----------------------------------- | :----------------------------------------------------- | 15 | | [``](#line) | 辅助线（可带文本），例如表示平均值或者预期分布的直线。 | 16 | | [``](#image) | 辅助图片，在图表上添加辅助图片。 | 17 | | [``](#text) | 辅助文本，指定位置添加文本说明。 | 18 | | [``](#region) | 辅助框，框选一段图区，设置背景、边框等。 | 19 | | [``](#html) | 辅助 html，指定位置添加自定义 html，显示自定义信息。 | 20 | | [``](#arc) | 辅助弧线。 | 21 | | [``](#RegionFilter) | 辅助框，框选一段图区，设置背景、边框等。| 22 | | [``](#DataMarker) | 辅助 html，指定位置添加自定义 html，显示自定义信息。| 23 | | [``](#DataRegion) | 辅助弧线。| 24 | 25 | 26 | ### 属性说明 27 | - 不同辅助标记组件所支持的配置属性也不一样，主要差异为坐标位置属性差异: 28 | - Text, Html 中使用 position 29 | - Line, Region, Image, Arc 中使用 start、end 字段 30 | 31 | **位置值说明** 32 | - Object 使用图表 x,y 对应的原始数据例如： {time: ‘2010-01-01’, value: 200} 33 | - Array 数组来配置位置 [x, y]，根据数组中的值的存在以下几种形式： 34 | - x，y 都是原始数据 [‘2010-01-01’] 35 | - x，y 可以使用原始数据的替代字符串 ‘min’, ‘max’, ‘median’ , 例如：[‘median’, 200] 36 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 ‘%’, 例如[‘50%’, ‘50%’] 使得辅助元素居中 37 | - Function 回调函数，可以动态的确定辅助元素的位置 38 | 39 | ```js 40 | // 应用于数据动态更新，辅助元素的位置根据数据变化 41 | 42 | { 45 | return []; //位置信息 46 | }} 47 | /> 48 | 49 | ``` 50 | 51 | ## 使用示例 52 | ![e051f3e7-35ab-4895-8aa6-89fba3045da9.png](https://img.alicdn.com/tfs/TB16XZ8bOqAXuNjy1XdXXaYcVXa-1186-510.png) 53 | 54 | ```js 55 | 56 | 57 | 59 | 61 | 63 | 64 | 65 | ``` 66 | [demo链接](../demo/detail?id=other-bullet-graph&selectedKey=%E5%85%B6%E4%BB%96%E5%9B%BE%E8%A1%A8) 67 | 68 | ## API 69 | 70 | ### Guide 71 | `` 本身并没有属性需要配置，该组件作为一个管理标签，用来管理其子组件的渲染与更新。任意Guide更新会导致这这组内的其他Guide重绘。 72 | 73 | 74 | ### Line 75 | 76 | ```js 77 | 78 | 96 | 97 | ``` 98 | 99 | #### `top` 100 | * 类型：Boolean 101 | * 描述：指定 guide 是否绘制在 canvas 最上层，默认为`false`, 即绘制在最下层。 102 | 103 | #### `start` 104 | * 类型： Object | Function | Array 105 | * 描述：指定辅助线的起始位置，该值的类型如下： 106 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 107 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 108 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 109 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 110 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 111 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 112 | 113 | ```js 114 | 115 | { 116 | return []; //位置信息 117 | }} /> 118 | 119 | ``` 120 | 121 | #### `end` 122 | * 类型： Object | Function | Array 123 | * 描述：指定辅助线的结束位置，使用同 start。 124 | 125 | #### `lineStyle` 126 | * 类型： Object 127 | * 描述：辅助线样式配置。[更详细配置](./graphic) 128 | 129 | #### `text` 130 | * 类型： Object 131 | * 描述：辅助线可以带文本，该属性使用如下： 132 | 133 | ```js 134 | 135 | 148 | 149 | ``` 150 | 151 | 152 | ### Text 153 | 154 | ```js 155 | 156 | 169 | 170 | ``` 171 | 172 | #### `top` 173 | * 类型： Boolean 174 | * 描述：指定 giude 是否绘制在 canvas 最上层。 175 | 默认值:false, 即绘制在最下层。 176 | 177 | #### `position` 178 | * 类型： Object | Function | Array 179 | * 描述：指定辅助文本的显示位置，该值的类型如下： 180 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 181 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 182 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 183 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 184 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%'] 使得辅助元素居中 185 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 186 | 187 | ```js 188 | 189 | [x, y]} > // 返回位置信息 190 | 191 | ``` 192 | 193 | #### `content` 194 | * 类型： String 195 | * 描述：辅助文本的显示内容。 196 | 197 | #### `style` 198 | * 类型： Object 199 | * 描述：用于设置辅助文本的显示样式。[更详细配置](./graphic) 200 | 201 | #### `offsetX` 202 | * 类型： Number 203 | * 描述：x 方向的偏移量。 204 | 205 | #### `offsetY` 206 | * 类型： Number 207 | * 描述：y 方向的偏移量。 208 | 209 | 210 | ### Image 211 | 212 | ```js 213 | 214 | // 辅助图片 image，只是指定了 start，则该点表示图片左上角坐标 215 |

225 | 226 | ``` 227 | 228 | #### `top` 229 | * 类型： Boolean 230 | * 描述：指定 giude 是否绘制在 canvas 最上层。 231 | 默认值:`false`, 即绘制在最下层。 232 | 233 | #### `start` 234 | * 类型： Object | Function | Array 235 | * 描述：指定辅助图片的起始位置，即图片的左上角，该值的类型如下： 236 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 237 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 238 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 239 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 240 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 241 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 242 | 243 | #### `end` 244 | * 类型： Object | Function | Array 245 | * 描述：可选，指定辅助图片的结束位置，即图片的右下角，该属性用法同 start。当 start 和 end 属性同时声明时，即指定了图片的宽度和高度。 246 | 247 | #### `src` 248 | * 类型： String 249 | * 描述：指定图片的地址，可以是路径，也可以是 base64 编码。 250 | 251 | #### `width` 252 | * 类型： Number 253 | * 描述：当仅指定了 start 属性时，用于设置图片的宽度。 254 | 255 | #### `height` 256 | * 类型： Number 257 | * 描述：当仅指定了 start 属性时，用于设置图片的高度。 258 | 259 | #### `offsetX` 260 | * 类型： Number 261 | * 描述：x 方向的偏移量。 262 | 263 | #### `offsetY` 264 | * 类型：Number 265 | * 描述：y 方向的偏移量。 266 | 267 | 268 | ### Region 269 | 270 | ```js 271 | 272 | 283 | 284 | ``` 285 | 286 | #### `top` 287 | * 类型：Boolean 288 | * 描述：指定 giude 是否绘制在 canvas 最上层。 289 | 默认值:false, 即绘制在最下层。 290 | 291 | #### `start` 292 | * 类型：Object | Function | Array 293 | * 描述：指定辅助背景框的起始位置，即背景框的左上角，该值的类型如下： 294 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 295 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 296 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 297 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 298 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 299 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 300 | 301 | #### `end` 302 | * 类型：Object | Function | Array 303 | * 描述：指定辅助背景框的结束位置，即背景框的右下角，该属性用法同 start。 304 | 305 | #### `style` 306 | * 类型：Object 307 | * 描述：辅助框图形样式属性。[更详细配置](./graphic) 308 | 309 | 310 | ### Html 311 | 312 | ```js 313 | 314 | 323 | 324 | ``` 325 | 326 | #### `position` 327 | * 类型：Object | Function |Array 328 | * 描述：设置 html 的显示位置，该值的类型如下： 329 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 330 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 331 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 332 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 333 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 334 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 335 | 336 | #### `zIndex` 337 | * 类型：Number 338 | * 描述：html 层级。 339 | 340 | #### `alignX` 341 | * 类型：String 342 | * 描述：html 的水平对齐方式，可取值为：`'left' | 'middle' | 'right'`，默认值为 `middle`。 343 | 344 | #### `alignY` 345 | * 类型：String 346 | * 描述：html 的垂直对齐方式，可取值为：`'top' | 'middle' | 'bottom'`，默认值为 `middle`。 347 | 348 | #### `offsetX` Number 349 | * 类型：Number 350 | * 描述：x 方向的偏移量。 351 | 352 | #### offsetY 353 | * 类型：Number 354 | * 描述：y 方向的偏移量。 355 | 356 | #### html 357 | * 类型： String | Function 358 | * 描述：需要显示的 html 内容。 359 | 360 | 361 | ### Arc 362 | 363 | ```js 364 | 365 | 371 | 372 | ``` 373 | 374 | #### `top` 375 | * 类型：Boolean 376 | * 描述：指定 giude 是否绘制在 canvas 最上层。 377 | 默认值： `false`, 即绘制在最下层。 378 | 379 | #### `start` 380 | * 类型： Object | Function | Array 381 | * 描述：指定辅助圆弧的起始位置，该值的类型如下： 382 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 383 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 384 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 385 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 386 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 387 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 388 | 389 | 390 | #### `end` 391 | * 类型：Object | Function | Array 392 | * 描述：指定辅助圆弧的结束位置，该属性用法同 start。 393 | 394 | #### `style` 395 | * 类型：Object 396 | * 描述：设置圆弧的显示样式。[更详细配置](./graphic) 397 | 398 | 399 | ### RegionFilter 400 | 辅助区域过滤，将图表中位于矩形选区中的图形元素提取出来，重新着色。 401 | 402 | ```js 403 | 404 | 410 | 411 | ``` 412 | #### `top` 413 | * 类型: Boolean 414 | * 描述: 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。 415 | 416 | #### `start` 417 | * 类型： Object | Function | Array 418 | * 描述：指定辅助线的起始位置，该值的类型如下： 419 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 420 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 421 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 422 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 423 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 424 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 425 | ```js 426 | 427 | { 428 | return []; //位置信息 429 | }} /> 430 | 431 | ``` 432 | 433 | #### `end` 434 | * 类型: Object | Function | Array 435 | * 描述: 指定辅助线的结束位置，使用同 start。 436 | 437 | #### `color` 438 | * 类型: String 439 | * 描述: 指定辅助过滤区域内图形元素重新着色的色值。 440 | 441 | #### `apply` 442 | * 类型: array 443 | * 描述: 可选,设定regionFilter只对特定geom类型起作用，如apply:['area'],默认regionFilter的作用域为整个图表 444 | 445 | 446 | ### DataMarker 447 | 特殊数据标注点，适用于折线图和面积图。 448 | ```js 449 | 450 | 467 | 468 | ``` 469 | 470 | #### `top` 471 | * 类型: Boolean 472 | * 描述: 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。 473 | 474 | #### `position` 475 | * 类型： Object | Function | Array 476 | * 描述：指定辅助线的起始位置，该值的类型如下： 477 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 478 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 479 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 480 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 481 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 482 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 483 | ```js 484 | 485 | { 486 | return []; //位置信息 487 | }} /> 488 | 489 | ``` 490 | 491 | #### `content` 492 | * 类型: String 493 | * 描述: 辅助文本的显示内容。 494 | 495 | #### `style` 496 | * 类型: Object 497 | * 描述: style:{ point:{}, line:{}, text:{} }， point/line/text样式。[更详细配置](./graphic) 498 | 499 | #### `display` 500 | * 类型: Object 501 | * 描述: display:{ point:true | false, line:true | false, text:true | false }，是否显示point/line/text。 502 | 503 | #### `lineLength` 504 | * 类型: Number 505 | * 描述: line的长度 506 | * 默认值: 30 507 | 508 | #### `direction` 509 | * 类型: String 510 | * 描述: 标注点朝向：'upward' | 'downward' 511 | * 默认值: 'upward'，即向上 512 | 513 | [demo链接](../demo/detail?id=other-datamarker_dataregion&selectedKey=其他图表) 514 | 515 | 516 | ### DataRegion 517 | 特殊数据区间标注，适用于折线图和面积图。 518 | ```js 519 | 520 | 538 | 539 | ``` 540 | #### `top` 541 | * 类型: Boolean 542 | * 描述: 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。 543 | 544 | #### `start` 545 | * 类型： Object | Function | Array 546 | * 描述：指定辅助线的起始位置，该值的类型如下： 547 | - object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 } 548 | - array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： 549 | - x，y 都是原始数据 [ '2010-01-01', 200 ]; 550 | - x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ] 551 | - x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中 552 | - function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景 553 | ```js 554 | 555 | { 556 | return []; //位置信息 557 | }} /> 558 | 559 | ``` 560 | 561 | #### `end` 562 | * 类型： Object | Function | Array 563 | * 描述：指定辅助线的结束位置，使用同 start。 564 | 565 | #### `content` 566 | * 类型： String 567 | * 描述：辅助文本的显示内容。 568 | 569 | #### `style` 570 | * 类型： Object 571 | * 描述：用于设置辅助文本的显示样式。[更详细配置](./graphic) 572 | 573 | #### `display` 574 | * 类型: Object 575 | * 描述: display:{ point:true | false, line:true | false, text:true | false }，是否显示point/line/text。 576 | 577 | #### `lineLength` 578 | * 类型: Number 579 | * 描述: line的长度 580 | * 默认值: 30 581 | 582 | #### `regionStyle` 583 | * 类型: Object 584 | * 描述: area 区间样式，[更详细配置](./graphic)。 585 | 586 | #### `lineLength` 587 | * 类型: Number 588 | * 描述: line的长度 589 | * 默认值: 30 590 | 591 | #### `direction` 592 | * 类型: String 593 | * 描述: 标注点朝向：'upward' | 'downward' 594 | * 默认值: 'upward'，即向上 595 | --------------------------------------------------------------------------------