Skip to content

Commit

Permalink
docs: 增加histogram的example和文档 (#1422)
Browse files Browse the repository at this point in the history 
* docs: 增加histogram的文档

增加histogram的文档

* style: 简化代码

* style: rebase和简化代码
  • Loading branch information
@arcsin1 @BBSQQ
arcsin1 authored and BBSQQ committed Aug 25, 2020
1 parent b316592 commit bfea6c9
Show file tree
Hide file tree
Showing 11 changed files with 467 additions and 0 deletions.
110 changes: 110 additions & 0 deletions examples/histogram/basic/API.en.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
---
title: API
---

# 配置属性

## 图表容器

- 见 [通用配置](TODO)

## 数据映射

### data 📌

**必选**, _array object_

功能描述： 设置图表数据源

默认配置： 无

数据源为对象集合，例如：`[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]`。

### meta

**可选**, _object_

功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。

默认配置： 无

| 细分配置项名称 | 类型 | 功能描述 |
| -------------- | ---------- | ------------------------------------------- |
| alias | _string_ | 字段的别名 |
| formatter | _function_ | callback 方法，对该字段所有值进行格式化处理 |
| values | _string[]_ | 枚举该字段下所有值 |
| range | _number[]_ | 字段的数据映射区间，默认为[0,1] |

```js
const data = [
{ value: 20 },
{ value: 34 },
{ value: 56 },
{ value: 67 }
];

const HistogramPlot = new Histogram(document.getElementById('container'), {
data,
// highlight-start
meta: {
range: {
min: 0,
tickInterval: 2,
},
value: {
max: 20,
nice: true,
alias: '数量',
formatter:(v)=>{return `${v}个`}
}
},
// highlight-end
binField: 'value',
});
HistogramPlot.render();
```

### binField 📌

**必选**, _string_

功能描述： 设置直方图绘制 (进行分箱) 的字段。

默认配置： 无

### binWidth 📌

**可选**, _string_

功能描述： 设置直方图的分箱宽度，binWidth 影响直方图分成多少箱, 不能与binNumber一起使用。

默认配置： Sturges formula 计算得到

### binNumber 📌

**可选**, _string_

功能描述： 设置直方图的分箱数量，binNumber 会影响直方图分箱后每个柱子的宽度。

默认配置： 无

## 图形样式

columnStyle ✨

**可选**, _object_

功能描述： 设置直方图柱子样式。


| 细分配置 | 类型 | 功能描述 |
| ------------- | ------ | ---------- |
| fill | string | 填充颜色 |
| stroke | string | 描边颜色 |
| lineWidth | number | 描边宽度 |
| lineDash | number | 虚线描边 |
| opacity | number | 整体透明度 |
| fillOpacity | number | 填充透明度 |
| strokeOpacity | number | 描边透明度 |


110 changes: 110 additions & 0 deletions examples/histogram/basic/API.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
---
title: API
---

# 配置属性

## 图表容器

- 见 [通用配置](TODO)

## 数据映射

### data 📌

**必选**, _array object_

功能描述： 设置图表数据源

默认配置： 无

数据源为对象集合，例如：`[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]`。

### meta

**可选**, _object_

功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。

默认配置： 无

| 细分配置项名称 | 类型 | 功能描述 |
| -------------- | ---------- | ------------------------------------------- |
| alias | _string_ | 字段的别名 |
| formatter | _function_ | callback 方法，对该字段所有值进行格式化处理 |
| values | _string[]_ | 枚举该字段下所有值 |
| range | _number[]_ | 字段的数据映射区间，默认为[0,1] |

```js
const data = [
{ value: 20 },
{ value: 34 },
{ value: 56 },
{ value: 67 }
];

const HistogramPlot = new Histogram(document.getElementById('container'), {
data,
// highlight-start
meta: {
range: {
min: 0,
tickInterval: 2,
},
value: {
max: 20,
nice: true,
alias: '数量',
formatter:(v)=>{return `${v}个`}
}
},
// highlight-end
binField: 'value',
});
HistogramPlot.render();
```

### binField 📌

**必选**, _string_

功能描述： 设置直方图绘制 (进行分箱) 的字段。

默认配置： 无

### binWidth 📌

**可选**, _string_

功能描述： 设置直方图的分箱宽度，binWidth 影响直方图分成多少箱, 不能与binNumber一起使用。

默认配置： Sturges formula 计算得到

### binNumber 📌

**可选**, _string_

功能描述： 设置直方图的分箱数量，binNumber 会影响直方图分箱后每个柱子的宽度。

默认配置： 无

## 图形样式

columnStyle ✨

**可选**, _object_

功能描述： 设置直方图柱子样式。


| 细分配置 | 类型 | 功能描述 |
| ------------- | ------ | ---------- |
| fill | string | 填充颜色 |
| stroke | string | 描边颜色 |
| lineWidth | number | 描边宽度 |
| lineDash | number | 虚线描边 |
| opacity | number | 整体透明度 |
| fillOpacity | number | 填充透明度 |
| strokeOpacity | number | 描边透明度 |


74 changes: 74 additions & 0 deletions examples/histogram/basic/demo/basic.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { Histogram } from '@antv/g2plot';

const data = [
{ value: 1.2 },
{ value: 3.4 },
{ value: 3.7 },
{ value: 4.3 },
{ value: 5.2 },
{ value: 5.8 },
{ value: 6.1 },
{ value: 6.5 },
{ value: 6.8 },
{ value: 7.1 },
{ value: 7.3 },
{ value: 7.7 },
{ value: 8.3 },
{ value: 8.6 },
{ value: 8.8 },
{ value: 9.1 },
{ value: 9.2 },
{ value: 9.4 },
{ value: 9.5 },
{ value: 9.7 },
{ value: 10.5 },
{ value: 10.7 },
{ value: 10.8 },
{ value: 11.0 },
{ value: 11.0 },
{ value: 11.1 },
{ value: 11.2 },
{ value: 11.3 },
{ value: 11.4 },
{ value: 11.4 },
{ value: 11.7 },
{ value: 12.0 },
{ value: 12.9 },
{ value: 12.9 },
{ value: 13.3 },
{ value: 13.7 },
{ value: 13.8 },
{ value: 13.9 },
{ value: 14.0 },
{ value: 14.2 },
{ value: 14.5 },
{ value: 15 },
{ value: 15.2 },
{ value: 15.6 },
{ value: 16.0 },
{ value: 16.3 },
{ value: 17.3 },
{ value: 17.5 },
{ value: 17.9 },
{ value: 18.0 },
{ value: 18.0 },
{ value: 20.6 },
{ value: 21 },
{ value: 23.4 },
];

const histogramPlot = new Histogram('container', {
data,
binField: 'value',
tooltip: {
showMarkers: false,
position: 'top',
},
interactions: [
{
name: 'element-highlight',
},
],
});

histogramPlot.render();
86 changes: 86 additions & 0 deletions examples/histogram/basic/demo/binWidth.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { Histogram } from '@antv/g2plot';

const data = [
{ value: 1.2 },
{ value: 3.4 },
{ value: 3.7 },
{ value: 4.3 },
{ value: 5.2 },
{ value: 5.8 },
{ value: 6.1 },
{ value: 6.5 },
{ value: 6.8 },
{ value: 7.1 },
{ value: 7.3 },
{ value: 7.7 },
{ value: 8.3 },
{ value: 8.6 },
{ value: 8.8 },
{ value: 9.1 },
{ value: 9.2 },
{ value: 9.4 },
{ value: 9.5 },
{ value: 9.7 },
{ value: 10.5 },
{ value: 10.7 },
{ value: 10.8 },
{ value: 11.0 },
{ value: 11.0 },
{ value: 11.1 },
{ value: 11.2 },
{ value: 11.3 },
{ value: 11.4 },
{ value: 11.4 },
{ value: 11.7 },
{ value: 12.0 },
{ value: 12.9 },
{ value: 12.9 },
{ value: 13.3 },
{ value: 13.7 },
{ value: 13.8 },
{ value: 13.9 },
{ value: 14.0 },
{ value: 14.2 },
{ value: 14.5 },
{ value: 15 },
{ value: 15.2 },
{ value: 15.6 },
{ value: 16.0 },
{ value: 16.3 },
{ value: 17.3 },
{ value: 17.5 },
{ value: 17.9 },
{ value: 18.0 },
{ value: 18.0 },
{ value: 20.6 },
{ value: 21 },
{ value: 23.4 },
];

const histogramPlot = new Histogram('container', {
data,
binField: 'value',
binWidth: 4,
tooltip: {
showMarkers: false,
position: 'top',
},
interactions: [
{
name: 'element-highlight',
},
],
/** range 为 x 轴代表字段，count 为 y 轴统计个数字段 */
meta: {
range: {
min: 0,
tickInterval: 2,
},
count: {
max: 20,
nice: true,
},
},
});

histogramPlot.render();
Loading

0 comments on commit bfea6c9

Please sign in to comment.