Skip to content

Commit

Permalink
docs: update readme and add a demo of pie
Browse files Browse the repository at this point in the history
  • Loading branch information
@xile611
xile611 committed Jul 7, 2023
1 parent 4f69e18 commit 4d44df9
Show file tree
Hide file tree
Showing 5 changed files with 247 additions and 211 deletions.
138 changes: 48 additions & 90 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,120 +74,80 @@ yarn add @visactor/vgrammar
import { View } from '@visactor/vgrammar';

const spec = {
padding: { top: 5, right: 5, bottom: 30, left: 60 },
data: [
{
id: 'table',
values: [
{
name: 'A',
value: 214480
value: 3676,
name: ' ~ 29'
},
{
name: 'B',
value: 155506
value: 3872,
name: '30 ~ 39'
},
{
name: 'C',
value: 100764
value: 1668,
name: '40 ~ 49'
},
{
name: 'D',
value: 92715
value: 610,
name: '50 ~'
}
]
},
{
id: 'pie',
source: 'table',
transform: [
{
type: 'pie',
field: 'value',
asStartAngle: 'startAngle',
asEndAngle: 'endAngle'
}
]
}
],

scales: [
{
id: 'xscale',
type: 'band',
id: 'colorScale',
type: 'ordinal',
domain: { data: 'table', field: 'name' },
dependency: ['viewBox'],
range: (scale, params) => {
return [params.viewBox.x1, params.viewBox.x2];
},
padding: 0.05,
round: true
},
{
id: 'yscale',
type: 'linear',
domain: { data: 'table', field: 'value' },
dependency: ['viewBox'],
range: (scale, params) => {
return [params.viewBox.y2, params.viewBox.y1];
},
nice: true
range: [
'#6690F2',
'#70D6A3',
'#B4E6E2',
'#63B5FC',
'#FF8F62',
'#FFDC83',
'#BCC5FD',
'#A29BFE',
'#63C4C7',
'#F68484'
]
}
],

marks: [
{
type: 'component',
componentType: 'axis',
scale: 'xscale',
tickCount: -1,
dependency: ['viewBox'],
encode: {
update: (scale, elment, params) => {
return {
x: params.viewBox.x1,
y: params.viewBox.y2,
start: { x: 0, y: 0 },
end: { x: params.viewBox.width(), y: 0 }
};
}
}
},
{
type: 'component',
componentType: 'axis',
scale: 'yscale',
dependency: ['viewBox'],
encode: {
update: (scale, elment, params) => {
return {
x: params.viewBox.x1,
y: params.viewBox.y1,
start: { x: 0, y: params.viewBox.height() },
end: { x: 0, y: 0 },
verticalFactor: -1
};
}
}
},
{
type: 'component',
componentType: 'crosshair',
scale: 'xscale',
crosshairShape: 'rect',
crosshairType: 'x',
dependency: ['viewBox'],
type: 'arc',
from: { data: 'pie' },
dependency: ['viewBox', 'colorScale'],
encode: {
update: (scale, elment, params) => {
update: (datum, element, params) => {
const viewBox = params.viewBox;
const maxR = Math.min(viewBox.width() / 2, viewBox.height() / 2);
return {
start: { y: params.viewBox.y1 },
rectStyle: { height: params.viewBox.height() }
x: viewBox.x1 + viewBox.width() / 2,
y: viewBox.y1 + viewBox.height() / 2,
startAngle: datum.startAngle,
endAngle: datum.endAngle,
innerRadius: 100,
outerRadius: maxR,
fill: params.colorScale.scale(datum.name)
};
}
}
},
{
type: 'rect',
from: { data: 'table' },
encode: {
update: {
x: { scale: 'xscale', field: 'name' },
width: { scale: 'xscale', band: 1 },
y: { scale: 'yscale', field: 'value' },
y1: {
callback: (datum, element, params) => {
return params.yscale.scale(params.yscale.domain()[0]);
},
dependency: ['yscale']
},
fill: '#6690F2'
},
hover: {
fill: 'red'
Expand All @@ -199,8 +159,6 @@ const spec = {

const vGrammarView = new View({
autoFit: true,
width: spec.width,
height: spec.height,
container: 'chart',
hover: true
});
Expand Down
204 changes: 84 additions & 120 deletions README.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,136 +71,100 @@ yarn add @visactor/vgrammar
## 快速上手

```javascript
import { View } from '@visactor/vgrammar';

const spec = {
type: 'common',
data: {
values: [
{
time: '2:00',
value: 8,
type: '抖音'
},
{
time: '4:00',
value: 9,
type: '抖音'
},
{
time: '6:00',
value: 11,
type: '抖音'
},
{
time: '8:00',
value: 14,
type: '抖音'
},
{
time: '10:00',
value: 16,
type: '抖音'
},
{
time: '12:00',
value: 17,
type: '抖音'
},
{
time: '14:00',
value: 17,
type: '抖音'
},
{
time: '16:00',
value: 16,
type: '抖音'
},
{
time: '18:00',
value: 15,
type: '抖音'
},

{
time: '2:00',
value: 7,
type: 'B站'
},
{
time: '4:00',
value: 8,
type: 'B站'
},
{
time: '6:00',
value: 9,
type: 'B站'
},
{
time: '8:00',
value: 10,
type: 'B站'
},
{
time: '10:00',
value: 9,
type: 'B站'
},
{
time: '12:00',
value: 12,
type: 'B站'
},
{
time: '14:00',
value: 14,
type: 'B站'
},
{
time: '16:00',
value: 12,
type: 'B站'
},
{
time: '18:00',
value: 14,
type: 'B站'
}
]
},
color: ['#6690F2', '#70D6A3'],
series: [
data: [
{
id: 'table',
values: [
{
value: 3676,
name: ' ~ 29'
},
{
value: 3872,
name: '30 ~ 39'
},
{
value: 1668,
name: '40 ~ 49'
},
{
value: 610,
name: '50 ~'
}
]
},
{
type: 'bar',
xField: 'time',
yField: 'value',
stack: true,
seriesField: 'type'
id: 'pie',
source: 'table',
transform: [
{
type: 'pie',
field: 'value',
asStartAngle: 'startAngle',
asEndAngle: 'endAngle'
}
]
}
],
legends: {
visible: true,
orient: 'right'
},
axes: [

scales: [
{
orient: 'bottom',
type: 'band'
},
id: 'colorScale',
type: 'ordinal',
domain: { data: 'table', field: 'name' },
range: [
'#6690F2',
'#70D6A3',
'#B4E6E2',
'#63B5FC',
'#FF8F62',
'#FFDC83',
'#BCC5FD',
'#A29BFE',
'#63C4C7',
'#F68484'
]
}
],

marks: [
{
orient: 'left',
type: 'linear'
type: 'arc',
from: { data: 'pie' },
dependency: ['viewBox', 'colorScale'],
encode: {
update: (datum, element, params) => {
const viewBox = params.viewBox;
const maxR = Math.min(viewBox.width() / 2, viewBox.height() / 2);
return {
x: viewBox.x1 + viewBox.width() / 2,
y: viewBox.y1 + viewBox.height() / 2,
startAngle: datum.startAngle,
endAngle: datum.endAngle,
innerRadius: 100,
outerRadius: maxR,
fill: params.colorScale.scale(datum.name)
};
},
hover: {
fill: 'red'
}
}
}
]
};

/**
* 图表容器 dom id: CHART_CONTAINER_DOM_ID
* ChartSpace 类: ChartSpace
*
*/
const chartSpace = new ChartSpace(spec, { dom: CHART_CONTAINER_DOM_ID });
await chartSpace.renderAsync();
const vGrammarView = new View({
autoFit: true,
container: 'chart',
hover: true
});
vGrammarView.parseSpec(spec);

vGrammarView.runAsync();
```

##
Expand Down
Loading

0 comments on commit 4d44df9

Please sign in to comment.