[Bug] 图例筛选后，折线图crosshair报错 #2905
Description
Version
1.11.5
Link to Minimal Reproduction
null
Steps to Reproduce
const itemData = [
{
key: '1719981900',
value: '0',
},
{
key: '1719982200',
value: '3',
},
{
key: '1719982500',
value: '2',
},
{
key: '1719982800',
value: '1',
},
{
key: '1719983100',
value: '1',
},
{
key: '1719983400',
value: '1',
},
{
key: '1719983700',
value: '1',
},
{
key: '1719984000',
value: '7',
},
{
key: '1719984300',
value: '1',
},
{
key: '1719984600',
value: '4',
},
{
key: '1719984900',
value: '8',
},
{
key: '1719985200',
value: '10',
},
{
key: '1719985500',
value: '3',
},
{
key: '1719985800',
value: '0',
},
{
key: '1719986100',
value: '3',
},
{
key: '1719986400',
value: '1',
},
{
key: '1719986700',
value: '8',
},
{
key: '1719987000',
value: '5',
},
{
key: '1719987300',
value: '4',
},
{
key: '1719987600',
value: '11',
},
];
const gmvData = [
{
key: '1719981900',
amount: {
amount_formatted: 'S$0.00',
amount_delimited: '0.00',
amount: '0',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719982200',
amount: {
amount_formatted: 'S$38.64',
amount_delimited: '38.64',
amount: '38.64',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719982500',
amount: {
amount_formatted: 'S$14.78',
amount_delimited: '14.78',
amount: '14.78',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719982800',
amount: {
amount_formatted: 'S$11.67',
amount_delimited: '11.67',
amount: '11.67',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719983100',
amount: {
amount_formatted: 'S$6.05',
amount_delimited: '6.05',
amount: '6.05',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719983400',
amount: {
amount_formatted: 'S$12.86',
amount_delimited: '12.86',
amount: '12.86',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719983700',
amount: {
amount_formatted: 'S$14.85',
amount_delimited: '14.85',
amount: '14.85',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719984000',
amount: {
amount_formatted: 'S$68.02',
amount_delimited: '68.02',
amount: '68.02',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719984300',
amount: {
amount_formatted: 'S$6.72',
amount_delimited: '6.72',
amount: '6.72',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719984600',
amount: {
amount_formatted: 'S$33.37',
amount_delimited: '33.37',
amount: '33.37',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719984900',
amount: {
amount_formatted: 'S$57.15',
amount_delimited: '57.15',
amount: '57.15',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719985200',
amount: {
amount_formatted: 'S$60.21',
amount_delimited: '60.21',
amount: '60.21',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719985500',
amount: {
amount_formatted: 'S$48.41',
amount_delimited: '48.41',
amount: '48.41',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719985800',
amount: {
amount_formatted: 'S$0.00',
amount_delimited: '0.00',
amount: '0',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719986100',
amount: {
amount_formatted: 'S$26.51',
amount_delimited: '26.51',
amount: '26.51',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719986400',
amount: {
amount_formatted: 'S$8.76',
amount_delimited: '8.76',
amount: '8.76',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719986700',
amount: {
amount_formatted: 'S$62.26',
amount_delimited: '62.26',
amount: '62.26',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719987000',
amount: {
amount_formatted: 'S$44.60',
amount_delimited: '44.60',
amount: '44.6',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719987300',
amount: {
amount_formatted: 'S$25.96',
amount_delimited: '25.96',
amount: '25.96',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
{
key: '1719987600',
amount: {
amount_formatted: 'S$98.05',
amount_delimited: '98.05',
amount: '98.05',
currency_code: 'SGD',
currency_symbol: 'S$',
},
},
];
const transformedItemData = itemData.map(({ key, value }) => ({
x: Number(key),
y: Number(value),
type: 'SKU orders created',
displayValue: value,
color: 'blue',
}));
const transformedGmvData = gmvData.map(({ key, amount }) => ({
x: Number(key),
y: Number(amount.amount),
type: 'GMV',
displayValue: `S$${amount.amount}`,
color: 'green',
}));
const getFirstKey = (data) => {
if (data.length > 0) {
return data[0].key;
}
return null;
};
const getLastKey = (data) => {
if (data.length > 0) {
return data[data.length - 1].key;
}
return null;
};
const spec = {
type: 'line',
padding: 0,
data: [
{
id: 'item_sold',
values: transformedItemData,
},
{
id: 'gmv',
values: transformedGmvData,
},
],
series: [
{
type: 'line',
id: 'line0',
dataId: 'item_sold',
line: {
style: {
stroke: {
gradient: 'linear',
stops: [
{
offset: 0,
color: 'red',
},
{
offset: 1,
color: 'blue',
},
],
},
lineWidth: 3,
curveType: 'monotone',
},
},
seriesField: 'type',
xField: 'x',
yField: 'y',
stack: true,
},
{
type: 'line',
id: 'line1',
dataId: 'gmv',
line: {
style: {
stroke: {
gradient: 'linear',
stops: [
{
offset: 0,
color: 'yellow',
},
{
offset: 1,
color: 'green',
},
],
},
lineWidth: 3,
curveType: 'monotone',
},
},
seriesField: 'type',
xField: 'x',
yField: 'y',
stack: true,
},
],
axes: [
{
orient: 'left',
seriesId: ['line0'],
id: 'axisLeft',
domainLine: {
visible: false,
},
expand: {
max: 0.1,
},
grid: {
style: {
stroke: '#5D75C0',
strokeOpacity: 0.4,
lineWidth: 1,
},
},
label: {
formatter: '{label:.2s}',
style: {
fill: '#E5ECFF',
fontWeight: 400,
fontSize: 16,
},
},
tick: {
tickCount: 6,
forceTickCount: 6,
},
},
{
orient: 'right',
seriesId: ['line1'],
id: 'axisRight',
sync: { axisId: 'axisLeft', tickAlign: true },
grid: {
visible: false,
},
label: {
formatter: '{label:.2s}',
style: {
fill: '#E5ECFF',
fontWeight: 400,
fontSize: 16,
},
},
},
{
orient: 'bottom',
type: 'time',
sampling: false,
softMin: getFirstKey(itemData),
softMax: getLastKey(itemData),
layers: [
{
timeFormat: '%H:%M',
},
],
innerOffset: {
left: 20,
right: 20,
},
domainLine: {
style: {
stroke: '#5D75C0',
lineWidth: 2,
},
},
grid: {
visible: false,
},
label: {
space: 0,
style: {
fill: '#E5ECFF',
fontWeight: 400,
fontSize: 16,
lineHeight: 40,
},
},
tick: {
visible: true,
tickCount: 5,
forceTickCount: 5,
},
},
],
legends: [
{
padding: [15, 10, 15, 0],
visible: true,
position: 'start',
orient: 'top',
item: {
shape: {
style: {
size: 16,
symbolType: 'roundLine',
}
},
label: {
space: 1,
formatMethod: text => {
return {
type: 'rich',
text: [
{
text,
fill: '#E5E5FF',
opacity: 0.8,
fontSize: 14,
fontWeight: '500',
lineHeight: 20,
},
],
};
},
},
},
hover: false,
offsetY: 5,
},
],
tooltip: {
renderMode: 'canvas',
dimension: {
title: {
valueTimeFormat: '%H:%M'
},
content: [
{
key: (datum) => `${datum.type}: ${datum.displayValue}`,
},
],
position: 'bottom',
positionMode: 'pointer',
},
style: {
panel: {
padding: 24,
backgroundColor: '#32326C',
border: {
radius: 16,
},
},
titleLabel: {
fontSize: 16,
fill: 'rgba(229, 236, 255, 0.6)',
lineHeight: 21,
fontWeight: 300,
},
keyLabel: {
fontSize: 16,
fill: '#FFFFFF',
lineHeight: 22,
},
spaceRow: 8,
},
},
crosshair: [
{
followTooltip: true,
xField: {
line: {
type: 'line',
style: {
lineDash: [],
stroke: '#799BFF',
},
},
},
},
],
point: {
visible: false,
},
background: 'black',
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;Current Behavior
Expected Behavior
no error
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response