-
Notifications
You must be signed in to change notification settings - Fork 605
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: 增加 column，bar 背景色设置的demo & 图表指引 (#2333)
- Loading branch information
Showing
11 changed files
with
137 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { Bar } from '@antv/g2plot'; | ||
|
|
||
| const data = [ | ||
| { type: '家具家电', sales: 38 }, | ||
| { type: '粮油副食', sales: 52 }, | ||
| { type: '生鲜水果', sales: 61 }, | ||
| { type: '美容洗护', sales: 145 }, | ||
| { type: '母婴用品', sales: 48 }, | ||
| { type: '进口食品', sales: 38 }, | ||
| { type: '食品饮料', sales: 38 }, | ||
| { type: '家庭清洁', sales: 38 }, | ||
| ]; | ||
|
|
||
| const bar = new Bar('container', { | ||
| data, | ||
| xField: 'sales', | ||
| yField: 'type', | ||
| legend: { | ||
| position: 'top-left', | ||
| }, | ||
| barBackground: { | ||
| style: { | ||
| fill: 'rgba(0,0,0,0.1)', | ||
| }, | ||
| }, | ||
| interactions: [{ type: 'active-region', enable: false }], | ||
| }); | ||
|
|
||
| bar.render(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,117 +1,28 @@ | ||
| import { Column } from '@antv/g2plot'; | ||
|
|
||
| const data = [ | ||
| { | ||
| year: '1991', | ||
| value: 3, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1992', | ||
| value: 4, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1993', | ||
| value: 3.5, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1994', | ||
| value: 5, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1995', | ||
| value: 4.9, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1996', | ||
| value: 6, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1997', | ||
| value: 7, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1998', | ||
| value: 9, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1999', | ||
| value: 13, | ||
| type: 'Lon', | ||
| }, | ||
| { | ||
| year: '1991', | ||
| value: 3, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1992', | ||
| value: 4, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1993', | ||
| value: 3.5, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1994', | ||
| value: 5, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1995', | ||
| value: 4.9, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1996', | ||
| value: 6, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1997', | ||
| value: 7, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1998', | ||
| value: 9, | ||
| type: 'Bor', | ||
| }, | ||
| { | ||
| year: '1999', | ||
| value: 13, | ||
| type: 'Bor', | ||
| }, | ||
| ]; | ||
| fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json') | ||
| .then((data) => data.json()) | ||
| .then((data) => { | ||
| const stackedColumnPlot = new Column('container', { | ||
| data, | ||
| isStack: true, | ||
| xField: 'year', | ||
| yField: 'value', | ||
| seriesField: 'type', | ||
| label: { | ||
| // 可手动配置 label 数据标签位置 | ||
| position: 'middle', // 'top', 'bottom', 'middle' | ||
| // 可配置附加的布局方法 | ||
| layout: [ | ||
| // 柱形图数据标签位置自动调整 | ||
| { type: 'interval-adjust-position' }, | ||
| // 数据标签防遮挡 | ||
| { type: 'interval-hide-overlap' }, | ||
| // 数据标签文颜色自动调整 | ||
| { type: 'adjust-color' }, | ||
| ], | ||
| }, | ||
| }); | ||
|
|
||
| const stackedColumnPlot = new Column('container', { | ||
| data, | ||
| isStack: true, | ||
| xField: 'year', | ||
| yField: 'value', | ||
| seriesField: 'type', | ||
| label: { | ||
| // 可手动配置 label 数据标签位置 | ||
| position: 'middle', // 'top', 'bottom', 'middle' | ||
| // 可配置附加的布局方法 | ||
| layout: [ | ||
| // 柱形图数据标签位置自动调整 | ||
| { type: 'interval-adjust-position' }, | ||
| // 数据标签防遮挡 | ||
| { type: 'interval-hide-overlap' }, | ||
| // 数据标签文颜色自动调整 | ||
| { type: 'adjust-color' }, | ||
| ], | ||
| }, | ||
| }); | ||
|
|
||
| stackedColumnPlot.render(); | ||
| stackedColumnPlot.render(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Column } from '@antv/g2plot'; | ||
|
|
||
| fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json') | ||
| .then((data) => data.json()) | ||
| .then((data) => { | ||
| const stackedColumnPlot = new Column('container', { | ||
| data, | ||
| isStack: true, | ||
| xField: 'year', | ||
| yField: 'value', | ||
| seriesField: 'type', | ||
| label: { | ||
| // 可手动配置 label 数据标签位置 | ||
| position: 'middle', // 'top', 'bottom', 'middle' | ||
| }, | ||
| interactions: [{ type: 'active-region', enable: false }], | ||
| columnBackground: { | ||
| style: { | ||
| fill: 'rgba(0,0,0,0.1)', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| stackedColumnPlot.render(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters