How to use @antv/scale - 10 common examples
To help you get started, we’ve selected a few @antv/scale examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
antvis / G2Plot / src / components / guide-line.ts View on Github 
private _init() {
const props = this.plot.options;
const defaultStyle = this._getDefaultStyle();
const baseConfig = _.mix(defaultStyle, {
...this.cfg,
type: 'line',
top: true,
}) as any;
if (this.cfg.type) {
const stateValue = this._getState(this.cfg.type);
const minValue = this._getState('min');
const maxValue = this._getState('max');
const Scale = getScale('linear');
// 重新组织scale并使用scale的min和max来计算guide point的百分比位置，以避免受nice的影响
const scale = new Scale(
_.mix(
{},
{
min: minValue,
max: maxValue,
nice: true,
},
props.meta
)
);
const percent = `${((stateValue - scale.min) / (scale.max - scale.min)) * 100}%`;
const start = ['0%', percent];
const end = ['100%', percent];
this.config = _.mix(function mergeYAxis(axisInfo, synchroTick: boolean) {
const isSameScale = sameScaleTest(axisInfo);
// 默认全部采用左轴的tickCount，具体标度对齐逻辑留待以后优化
const tickCount = axisInfo[0].scale.tickCount;
const LinearScale = getScale('linear');
if (!isSameScale) {
return axisInfo.map((axis) => {
const scale = axis.scale;
const values = calValues(scale, tickCount);
if (synchroTick) {
const linearScale: any = new LinearScale({
min: scale.min,
max: scale.max,
ticks: values,
tickCount,
color: axis.color,
} as any);
linearScale.layer = axis.layer;
return linearScale;
} else {
scale.layer = axis.layer;createScale(field, data) {
const self = this;
const def = self._getDef(field);
let scale;
const validData = data || [];
const firstValue = Util.Array.firstValue(validData, field);
if (Util.isNumber(field) || (Util.isNil(firstValue)) && !def) {
scale = Scale.identity({
value: field,
field: field.toString(),
values: [ field ]
});
} else { // 如果已经定义过这个度量
let type;
if (def) {
type = def.type;
}
type = type || self._getDefaultType(field, validData);
const cfg = self._getScaleCfg(type, field, validData);
if (def) {
Util.mix(cfg, def);
}
scale = Scale[type](cfg);
}point.z = 3;
point._origin = { x: point.z, y: point.y, z: '4' };
points.push(point);
const points1 = [{
x: 50,
y: [ 10, 20 ],
z: [ '1', '2' ],
_origin: { x: 50, y: [ 10, 20 ], z: [ '1', '2' ] }
}, {
x: [ 60, 80 ],
y: [ 50, 50 ],
z: [ '3', '4' ],
_origin: { x: [ 60, 80 ], y: [ 50, 50 ], z: [ '3', '4' ] }
}];
const labelScale1 = Scale.cat({
field: 'z',
values: [[ '1', '2' ], [ '3', '4' ]]
});
describe('one point one label', function() {
let gLabels;
it('init', function() {
gLabels = canvas.addGroup(PolarLabels, {
coord,
labelCfg: {
cfg: {
offset: 10
},
scales: [ labelScale ]
},
geomType: 'point'
});describe('Guide: 辅助 html', function() {
const coord = new Coord.Rect({
start: { x: 60, y: 460 },
end: { x: 460, y: 60 }
});
const canvas = new Canvas({
containerId: 'c1',
width: 500,
height: 500,
pixelRatio: 2
});
const group = canvas.addGroup();
const xScale = Scale.cat({
values: [ '一月', '二月', '三月', '四月', '五月' ]
});
const yScale = Scale.linear({
min: 0,
max: 1200
});
it('guide html, with defaul position(middle, middle)', function() {
const html = new Html({
xScales: {
month: xScale
},
yScales: {
temp: yScale
},it('create area', function() {
scaleA = Scale.cat({
field: 'a',
values: [ '1', '2', '3' ],
range: [ 0.2, 0.8 ]
});
geom = new Geom.Area({
data,
coord,
container: group,
scales: { a: scaleA, b: scaleB, c: scaleC, red: ScaleRed, 10: ScaleTen }
});
shapeContainer = geom.get('shapeContainer');
expect(geom.get('type')).equal('area');
expect(geom.get('shapeType')).equal('area');
});start: { x: 60, y: 460 },
end: { x: 460, y: 60 },
startAngle: -9 / 8 * Math.PI,
endAngle: 1 / 8 * Math.PI
});
const canvas = new Canvas({
containerId: 'arc-spec',
width: 500,
height: 500,
pixelRatio: 2
});
const group = canvas.addGroup();
const xScale = Scale.cat({
values: [ '一月', '二月', '三月', '四月', '五月' ]
});
const yScale = Scale.linear({
min: 0,
max: 1200
});
it('guide arc', function() {
const arc = new Arc({
xScales: {
month: xScale
},
yScales: {
temp: yScale
},describe('test geom interval', function() {
const data = [
{ a: '1', b: 2, c: '1' },
{ a: '2', b: 5, c: '1' },
{ a: '3', b: 4, c: '1' },
{ a: '1', b: 3, c: '2' },
{ a: '2', b: 1, c: '2' },
{ a: '3', b: 2, c: '2' }
];
scaleA = Scale.cat({
field: 'a',
values: [ '1', '2', '3' ],
range: [ 0.2, 0.8 ]
});
const group = canvas.addGroup();
const geom = new Geom.Interval({
data,
coord,
container: group,
scales: { a: scaleA, b: scaleB, c: scaleC, red: ScaleRed, 10: ScaleTen }
});
const shapeContainer = geom.get('shapeContainer');
it('draw interval', function() {
expect(geom.get('type')).eql('interval');
geom.position('a*b').color('c').adjust('dodge');describe('Guide: 辅助背景框', function() {
const coord = new Coord.Rect({
start: { x: 60, y: 460 },
end: { x: 460, y: 60 }
});
const canvas = new Canvas({
containerId: 'c1',
width: 500,
height: 500,
pixelRatio: 2
});
const group = canvas.addGroup();
const xScale = Scale.cat({
values: [ '一月', '二月', '三月', '四月', '五月' ]
});
const yScale = Scale.linear({
min: 0,
max: 1200
});
it('guide region', function() {
const region = new Region({
xScales: {
month: xScale
},
yScales: {
temp: yScale
},});
const canvas = new Canvas({
containerId: 'c1',
width: 500,
height: 500,
pixelRatio: 2
});
const group = canvas.addGroup();
const xScale = Scale.cat({
values: [ '一月', '二月', '三月', '四月', '五月' ]
});
const yScale = Scale.linear({
min: 0,
max: 1200
});
it('guide html, with defaul position(middle, middle)', function() {
const html = new Html({
xScales: {
month: xScale
},
yScales: {
temp: yScale
},
position: {
month: 3,
temp: 600
},@antv/scale
Toolkit for mapping abstract data into visual representation.
