VChart
VChart copied to clipboard
[Bug] cannot trigger linear Y axis's crosshair by `setDimensionIndex`
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
dimensionIndex暂时不支持线性轴
后续与 https://github.com/VisActor/VChart/issues/4131 一起处理