[Bug] cannot trigger linear Y axis's crosshair by `setDimensionIndex`
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
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 轴的
Expected Behavior
y 轴 crosshair 正常显示
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the supplied line-chart reproduction and inspect the setDimensionIndex path for crosshair handling, especially the y-axis filter and bindingAxesIndex configuration. Compare it with the working x-axis case. Done means setDimensionIndex(50, ...) displays the linear y-axis crosshair as expected without regressing the x-axis behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100