Got the error repeatedly when using the slider option with Antv G2 ver4.0.2: Uncaught TypeError: Cannot read property '0' of null at Tt (g2.min.js:31) ...

[BillSun2080]

Hi,

I updated Antv G2 from 3.x to latest 4.0.2. The slider function was working well in 3.x but after upgrading to v4.0.2 and code change according to the user guide, there are consecutive errors reporting like below, dozens and over hundred after some time and load the CPU much. I use Antv upon Ant design pro. It looks like when the problem is happening, the Antv G2 is busy in handling the source data. If the source data size was big，e.g. one thousand records, the computer seems more stucked, than when the source data is only few records.

1). Errors printed in console:

Uncaught TypeError: Cannot read property '0' of null
at Tt (g2.min.js:31)
at e.invertFromMatrix (g2.min.js:31)
at e.getShape (g2.min.js:31)
at e._findShape (g2.min.js:31)
at e.getShape (g2.min.js:31)
at e._findShape (g2.min.js:31)
at e.getShape (g2.min.js:31)
at e._findShape (g2.min.js:31)
at e.getShape (g2.min.js:31)
at e._findShape (g2.min.js:31)
at e.getShape (g2.min.js:31)
at t._getShape (g2.min.js:31)
at t._triggerEvent (g2.min.js:31)
at HTMLCanvasElement._eventCallback (g2.min.js:31)
Tt @ g2.min.js:31
e.invertFromMatrix @ g2.min.js:31
e.getShape @ g2.min.js:31
e._findShape @ g2.min.js:31
e.getShape @ g2.min.js:31
e._findShape @ g2.min.js:31
e.getShape @ g2.min.js:31
e._findShape @ g2.min.js:31
e.getShape @ g2.min.js:31
e._findShape @ g2.min.js:31
e.getShape @ g2.min.js:31
t._getShape @ g2.min.js:31
t._triggerEvent @ g2.min.js:31
_eventCallback @ g2.min.js:31

2). My code are as below. Acutally they are simplified as well as the data source, but still got the problem.

import { Chart } from '@antv/g2';

this.devDataChart = new Chart({
container: 'devChart',
autoFit: true,
width: 950,
height: 360,
});

let data=[
{Dev_Time: '2020-03-23 01:01:01', Vel_X:'10'},
{Dev_Time: '2020-03-23 01:02:02', Vel_X:'12'},
{Dev_Time: '2020-03-23 01:03:03', Vel_X:'8'},
{Dev_Time: '2020-03-23 01:04:04', Vel_X:'10'},
]

this.devDataChart.data(data);
this.devDataChart
.interval()
.position('Dev_Time*Vel_X')

this.devDataChart.option('slider', {
end: 0.8
})

this.devDataChart.render()

3). I also tried "按需引入" as instructed in user guide, but more problem happen, even the chart (without slider as option) cannot work properly.

Look forward to your support!

Thanks!
Br, Bill

[BillSun2080]

It might be that I did NOT give the proper parameters like start and end. In my case, at least they shall be time alike data type. I corrected the start and end parameter, there are still same errors. Seems there are more to be configured properly?

this.devDataChart.option('slider', {
end: 0.8
})

[simaQ]

The code that can reproduce the issue:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'mountNode',
  width: 950,
  height: 360,
});

const data = [
  { Dev_Time: '2020-03-23 01:01:01', Vel_X: 10 },
  { Dev_Time: '2020-03-23 01:02:02', Vel_X: 12 },
  { Dev_Time: '2020-03-23 01:03:03', Vel_X: 8 },
  { Dev_Time: '2020-03-23 01:04:04', Vel_X: 10 },
];

chart.data(data);
chart.interval().position('Dev_Time*Vel_X');

chart.option('slider', {
  end: 0.8,
});

chart.render();