Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/antvis/g2plot into feat-d…
Browse files Browse the repository at this point in the history 
…emo-mini-charts
  • Loading branch information
@paleface001
paleface001 committed Nov 15, 2019
2 parents d6ec9b6 + c934c94 commit 93b7856
Show file tree
Hide file tree
Showing 22 changed files with 364 additions and 257 deletions.
18 changes: 11 additions & 7 deletions examples/bar/basic/demo/basic.js
View file
@@ -1,11 +1,12 @@
import { Bar } from '@antv/g2plot';

const data = [
{ year: '1951 年', sales: 38, category: 'A' },
{ year: '1952 年', sales: 52, category: 'A' },
{ year: '1956 年', sales: 61, category: 'A' },
{ year: '1957 年', sales: 145, category: 'A' },
{ year: '1958 年', sales: 48, category: 'B' },
{ 地区: '华东', 销售额: 4684506.442 },
{ 地区: '中南', 销售额: 4137415.0929999948 },
{ 地区: '东北', 销售额: 2681567.469000001 },
{ 地区: '华北', 销售额: 2447301.017000004 },
{ 地区: '西南', 销售额: 1303124.508000002 },
{ 地区: '西北', 销售额: 815039.5959999998 },
];

const barPlot = new Bar(document.getElementById('container'), {
Expand All @@ -15,8 +16,11 @@ const barPlot = new Bar(document.getElementById('container'), {
},
forceFit: true,
data,
xField: 'sales',
yField: 'year',
xField: '销售额',
yField: '地区',
xAxis: {
formatter: (v) => Math.round(v / 10000) + '万',
},
});

barPlot.render();
5 changes: 3 additions & 2 deletions examples/bar/basic/demo/label-adjustColor.js
View file
Expand Up @@ -22,11 +22,12 @@ const barPlot = new Bar(document.getElementById('container'), {
data,
xField: 'sales',
yField: 'year',
color: '#000000',
colorField: 'year',
color: ['#55A6F3', '#CED4DE', '#55A6F3', '#55A6F3', '#55A6F3'],
label: {
visible: true,
position: 'middle', // options: left / middle / right
// adjustColor: false
adjustColor: true,
},
});

Expand Down
26 changes: 13 additions & 13 deletions examples/bar/basic/demo/label-position.js
View file
@@ -1,26 +1,26 @@
import { Bar } from '@antv/g2plot';

const data = [
{ year: '1951 年', sales: 38, category: 'A' },
{ year: '1952 年', sales: 52, category: 'A' },
{ year: '1956 年', sales: 61, category: 'A' },
{ year: '1957 年', sales: 145, category: 'A' },
{ year: '1958 年', sales: 48, category: 'B' },
{ 地区: '华东', 销售额: 4684506.442 },
{ 地区: '中南', 销售额: 4137415.0929999948 },
{ 地区: '东北', 销售额: 2681567.469000001 },
{ 地区: '华北', 销售额: 2447301.017000004 },
{ 地区: '西南', 销售额: 1303124.508000002 },
{ 地区: '西北', 销售额: 815039.5959999998 },
];

const barPlot = new Bar(document.getElementById('container'), {
forceFit: true,
title: {
visible: true,
text: '基础条形图 - 图形标签位置',
},
description: {
visible: true,
text: '条形图的图形标签位置可以指定为left-左对齐，middle-图形中心，bottom-图形右侧。',
text: '基础条形图',
},
forceFit: true,
data,
xField: 'sales',
yField: 'year',
xField: '销售额',
yField: '地区',
xAxis: {
formatter: (v) => Math.round(v / 10000) + '万',
},
label: {
visible: true,
position: 'middle', // options: left / middle / right
Expand Down
65 changes: 31 additions & 34 deletions examples/bar/group/demo/basic.js
View file
Expand Up @@ -2,54 +2,54 @@ import { GroupBar } from '@antv/g2plot';

const data = [
{
year: '1991',
value: 3,
type: 'Lon',
label: 'Mon.',
type: 'series1',
value: 2800,
},
{
year: '1992',
value: 4,
type: 'Lon',
label: 'Mon.',
type: 'series2',
value: 2260,
},
{
year: '1993',
value: 3.5,
type: 'Lon',
label: 'Tues.',
type: 'series1',
value: 1800,
},
{
year: '1994',
value: 5,
type: 'Lon',
label: 'Tues.',
type: 'series2',
value: 1300,
},
{
year: '1995',
value: 4.9,
type: 'Lon',
label: 'Wed.',
type: 'series1',
value: 950,
},
{
year: '1991',
value: 3,
type: 'Bor',
label: 'Wed.',
type: 'series2',
value: 900,
},
{
year: '1992',
value: 4,
type: 'Bor',
label: 'Thur.',
type: 'series1',
value: 500,
},
{
year: '1993',
value: 3.5,
type: 'Bor',
label: 'Thur.',
type: 'series2',
value: 390,
},
{
year: '1994',
value: 5,
type: 'Bor',
label: 'Fri.',
type: 'series1',
value: 170,
},
{
year: '1995',
value: 4.9,
type: 'Bor',
label: 'Fri.',
type: 'series2',
value: 100,
},
];

Expand All @@ -60,10 +60,7 @@ const barPlot = new GroupBar(document.getElementById('container'), {
},
data,
xField: 'value',
yField: 'year',
yAxis: {
min: 0,
},
yField: 'label',
groupField: 'type',
});

Expand Down
106 changes: 100 additions & 6 deletions examples/bar/stack/demo/adjust-label-display.js
View file
@@ -1,6 +1,6 @@
import { StackBar } from '@antv/g2plot';

const data = [
const data_old = [
{
year: '1991',
value: 3,
Expand Down Expand Up @@ -93,6 +93,99 @@ const data = [
},
];

const data = [
{
地区: '华东',
细分: '公司',
销售额: 1454715.807999998,
},
{
地区: '华东',
细分: '消费者',
销售额: 2287358.261999998,
},
{
地区: '华东',
细分: '小型企业',
销售额: 942432.3720000006,
},
{
地区: '中南',
细分: '公司',
销售额: 1335665.3239999984,
},
{
地区: '中南',
细分: '消费者',
销售额: 2057936.7620000008,
},
{
地区: '中南',
细分: '小型企业',
销售额: 743813.0069999992,
},
{
地区: '东北',
细分: '公司',
销售额: 834842.827,
},
{
地区: '东北',
细分: '消费者',
销售额: 1323985.6069999991,
},
{
地区: '东北',
细分: '小型企业',
销售额: 522739.0349999995,
},
{
地区: '华北',
细分: '公司',
销售额: 804769.4689999995,
},
{
地区: '华北',
细分: '消费者',
销售额: 1220430.5610000012,
},
{
地区: '华北',
细分: '小型企业',
销售额: 422100.9870000001,
},
{
地区: '西南',
细分: '公司',
销售额: 469341.684,
},
{
地区: '西南',
细分: '消费者',
销售额: 677302.8919999995,
},
{
地区: '西南',
细分: '小型企业',
销售额: 156479.9319999999,
},
{
地区: '西北',
细分: '公司',
销售额: 253458.1840000001,
},
{
地区: '西北',
细分: '消费者',
销售额: 458058.1039999998,
},
{
地区: '西北',
细分: '小型企业',
销售额: 103523.308,
},
];

const stackBarPlot = new StackBar(document.getElementById('container'), {
forceFit: true,
title: {
Expand All @@ -105,13 +198,14 @@ const stackBarPlot = new StackBar(document.getElementById('container'), {
'在堆叠条形图中，如果label的位置被设定为middle，即显示在条形中间。在对应形状大小不够摆放label的情况下，label会被自动隐藏。',
},
data,
xField: 'value',
yField: 'year',
yAxis: {
min: 0,
yField: '地区',
xField: '销售额',
xAxis: {
formatter: (v) => Math.round(v / 10000) + '万',
},
stackField: 'type',
stackField: '细分',
label: {
offset: 0,
visible: true,
position: 'middle',
},
Expand Down

0 comments on commit 93b7856

Please sign in to comment.