VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Feature] axes support 'sameDomain' for different axes

Open xile611 opened this issue 4 months ago • 0 comments

What problem does this feature solve?

Image

问题: 在实现双向条形图的时候,发现想要左右轴保持刻度完全同步,除了写死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
}

xile611 avatar Aug 08 '25 09:08 xile611