VChart
VChart copied to clipboard
[Feature] axes support 'sameDomain' for different axes
What problem does this feature solve?
问题: 在实现双向条形图的时候,发现想要左右轴保持刻度完全同步,除了写死min,max 没有其他的方案,希望可以提供一个 'sameTick' 配置
const spec = {
type: 'common',
title: {
id: 'title',
visible: true,
text: 'Congo Population Pyramid 2021',
},
layout: {
type: 'grid',
col: 3,
row: 4,
elements: [
{ modelId: 'title', col: 0, row: 0, colSpan: 3 },
{ modelId: 'legend', col: 0, row: 3, colSpan: 3 },
{ modelId: 'yAxis', col: 1, row: 1 },
{ modelId: 'leftRegion', col: 0, row: 1 },
{ modelId: 'leftXAxis', col: 0, row: 2 },
{ modelId: 'rightRegion', col: 2, row: 1 },
{ modelId: 'rightXAxis', col: 2, row: 2 }
]
},
region: [{ id: 'leftRegion' }, { id: 'rightRegion' }],
legends: [
{
visible: true,
orient: 'bottom',
id: 'legend',
interactive: false
}
],
series: [
{
id: 'male',
regionId: 'leftRegion',
type: 'bar',
data: {
id: 'maleData',
values: [
{
age: '0-4',
type: 'Male',
population: 232671,
},
{
age: '5-9',
type: 'Male',
population: 118331,
}
]
},
direction: 'horizontal',
xField: 'population',
yField: 'age',
},
{
id: 'female',
regionId: 'rightRegion',
type: 'bar',
data: {
id: 'femaleData',
values: [
{
age: '0-4',
type: 'Female',
population: 424322
},
{
age: '5-9',
type: 'Female',
population: 410397
}
]
},
direction: 'horizontal',
xField: 'population',
yField: 'age',
}
],
axes: [
{
id: 'yAxis',
regionId: ['leftRegion', 'rightRegion'],
orient: 'left',
type: 'band',
grid: { visible: false }
},
{
id: 'leftXAxis',
regionId: 'leftRegion',
seriesId: ['female', 'male'],
orient: 'bottom',
type: 'linear',
inverse: true,
},
{
id: 'rightXAxis',
regionId: 'rightRegion',
seriesId: ['female', 'male'],
orient: 'bottom',
type: 'linear',
sync: {
axisId: 'leftXAxis',
zeroAlign: true,
tickAlign: true
}
}
]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
What does the proposed API look like?
轴的 sync 新增配置
{
keepSame?: boolean
}