VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] cannot trigger linear Y axis's crosshair by `setDimensionIndex`

Open xiaoluoHe opened this issue 4 months ago • 2 comments

Version

all

Link to Minimal Reproduction

none

Steps to Reproduce

const spec = {
  type: 'line',
  data: [
    {
      id: 'line',
      values: [
        { x: 'Round 1', y: 21, c: 'Role A' },
        { x: 'Round 1', y: 38, c: 'Role B' },
        { x: 'Round 2', y: 28, c: 'Role A' },
        { x: 'Round 2', y: 45, c: 'Role B' },
        { x: 'Round 3', y: 22, c: 'Role A' },
        { x: 'Round 3', y: 56, c: 'Role B' },
        { x: 'Round 4', y: 34, c: 'Role A' },
        { x: 'Round 4', y: 48, c: 'Role B' },
        { x: 'Round 5', y: 34, c: 'Role A' },
        { x: 'Round 5', y: 64, c: 'Role B' },
        { x: 'Round 6', y: 44, c: 'Role A' },
        { x: 'Round 6', y: 72, c: 'Role B' },
        { x: 'Round 7', y: 38, c: 'Role A' },
        { x: 'Round 7', y: 65, c: 'Role B' },
        { x: 'Round 8', y: 24, c: 'Role A' },
        { x: 'Round 8', y: 70, c: 'Role B' },
        { x: 'Round 9', y: 28, c: 'Role A' },
        { x: 'Round 9', y: 62, c: 'Role B' }
      ]
    }
  ],
  legends: {
    visible: true,
    orient: 'bottom'
  },
  axes: [
    {
      orient: 'left',
      max: 100
    },
    {
      orient: 'bottom'
    },
    
  ],
  xField: 'x',
  yField: 'y',
  seriesField: 'c',
  point: {
    style: {
      size: 5
    },
    state: {
      dimension_hover: {
        size: 10
      }
    }
  },
  crosshair: {
    xField: {
      visible: true,
      line: {
        type: 'line', // Defaults is `rect`
        style: {
          lineWidth: 1,
          opacity: 1,
          stroke: '#000',
          lineDash: [2, 2]
        }
      },
      bindingAxesIndex: [1],
      defaultSelect: {
        axisIndex: 1,
        datum: 'Round 6'
      },
      label: {
        visible: true // label is off by default
      }
    },
    yField: {
      visible: true,
      bindingAxesIndex: [0, 2],
      defaultSelect: {
        axisIndex: 2,
        datum: 40
      },
      line: {
        style: {
          lineWidth: 1,
          opacity: 1,
          stroke: '#000',
          lineDash: [2, 2]
        }
      },
      label: {
        visible: true // label is off by default
      }
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

const filterY = (cmp)  => {
  return cmp.getSpec().orient === 'left'
}

const filterX = (cmp)  => {
  return cmp.getSpec().orient === 'bottom'
}

vchart.setDimensionIndex(50, {
    filter: filterY,
    crosshair: true,
    tooltip: false
})

vchart.setDimensionIndex('Round 1', {
    filter: filterX,
    crosshair: true,
    tooltip: false
})


// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

可以出发 x 轴的 crosshair,无法触发 y 轴的 Image

Expected Behavior

y 轴 crosshair 正常显示

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

xiaoluoHe avatar Jul 31 '25 09:07 xiaoluoHe

dimensionIndex暂时不支持线性轴

xuefei1313 avatar Aug 05 '25 03:08 xuefei1313

后续与 https://github.com/VisActor/VChart/issues/4131 一起处理

xuefei1313 avatar Aug 05 '25 03:08 xuefei1313