目前最新版本"@antv/g2": "5.0.17"仍然存在此问题，浏览器渲染图例时会卡死 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true

[FreedomSeekerLZ]

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

// 准备数据
const data = [
{
date: '2023-06-18 00:00:00',
condition: '未审核',
sortTime: '2023-06-18 00:00:00.000',
value: 3.91,
},
{
date: '2023-06-18 01:00:00',
condition: '未审核',
sortTime: '2023-06-18 01:00:00.000',
value: 3.59,
},
{
date: '2023-06-18 02:00:00',
condition: '未审核',
sortTime: '2023-06-18 02:00:00.000',
value: 3.57,
},
{
date: '2023-06-18 03:00:00',
condition: '未审核',
sortTime: '2023-06-18 03:00:00.000',
value: 3.49,
},
{
date: '2023-06-18 04:00:00',
condition: '未审核',
sortTime: '2023-06-18 04:00:00.000',
value: 3.94,
},
{
date: '2023-06-18 05:00:00',
condition: '未审核',
sortTime: '2023-06-18 05:00:00.000',
value: 3.57,
},
{
date: '2023-06-18 06:00:00',
condition: '未审核',
sortTime: '2023-06-18 06:00:00.000',
value: 3.54,
},
{
date: '2023-06-18 07:00:00',
condition: '未审核',
sortTime: '2023-06-18 07:00:00.000',
value: 4.11,
},
{
date: '2023-06-18 08:00:00',
condition: '未审核',
sortTime: '2023-06-18 08:00:00.000',
value: 4.38,
},
{
date: '2023-06-18 09:00:00',
condition: '未审核',
sortTime: '2023-06-18 09:00:00.000',
value: 4.19,
},
{
date: '2023-06-18 10:00:00',
condition: '未审核',
sortTime: '2023-06-18 10:00:00.000',
value: 4.02,
},
{
date: '2023-06-18 11:00:00',
condition: '未审核',
sortTime: '2023-06-18 11:00:00.000',
value: 3.9,
},
{
date: '2023-06-18 12:00:00',
condition: '未审核',
sortTime: '2023-06-18 12:00:00.000',
value: 4.44,
},
{
date: '2023-06-18 13:00:00',
condition: '未审核',
sortTime: '2023-06-18 13:00:00.000',
value: 4.01,
},
{
date: '2023-06-18 14:00:00',
condition: '未审核',
sortTime: '2023-06-18 14:00:00.000',
value: 4.09,
},
{
date: '2023-06-18 15:00:00',
condition: '未审核',
sortTime: '2023-06-18 15:00:00.000',
value: 4.07,
},
{
date: '2023-06-18 16:00:00',
condition: '未审核',
sortTime: '2023-06-18 16:00:00.000',
value: 4.37,
},
{
date: '2023-06-18 17:00:00',
condition: '未审核',
sortTime: '2023-06-18 17:00:00.000',
value: 4.07,
},
{
date: '2023-06-18 18:00:00',
condition: '未审核',
sortTime: '2023-06-18 18:00:00.000',
value: 4.15,
},
{
date: '2023-06-18 19:00:00',
condition: '未审核',
sortTime: '2023-06-18 19:00:00.000',
value: 4.21,
},
{
date: '2023-06-18 20:00:00',
condition: '未审核',
sortTime: '2023-06-18 20:00:00.000',
value: 4.38,
},
{
date: '2023-06-18 21:00:00',
condition: '未审核',
sortTime: '2023-06-18 21:00:00.000',
value: 3.88,
},
{
date: '2023-06-18 22:00:00',
condition: '未审核',
sortTime: '2023-06-18 22:00:00.000',
value: 4,
},
{
date: '2023-06-18 23:00:00',
condition: '未审核',
sortTime: '2023-06-18 23:00:00.000',
value: 3.85,
},
{
date: '2023-06-19 00:00:00',
condition: '未审核',
sortTime: '2023-06-19 00:00:00.000',
value: 4.15,
},
{
date: '2023-06-19 01:00:00',
condition: '未审核',
sortTime: '2023-06-19 01:00:00.000',
value: 3.48,
},
{
date: '2023-06-19 02:00:00',
condition: '已审核',
sortTime: '2023-06-19 02:00:00.000',
value: 3.32,
},
{
date: '2023-06-19 03:00:00',
condition: '已审核',
sortTime: '2023-06-19 03:00:00.000',
value: 3.55,
},
{
date: '2023-06-19 04:00:00',
condition: '已审核',
sortTime: '2023-06-19 04:00:00.000',
value: 4.08,
},
{
date: '2023-06-19 05:00:00',
condition: '已审核',
sortTime: '2023-06-19 05:00:00.000',
value: 3.79,
},
{
date: '2023-06-19 06:00:00',
condition: '已审核',
sortTime: '2023-06-19 06:00:00.000',
value: 3.87,
},
{
date: '2023-06-19 07:00:00',
condition: '已审核',
sortTime: '2023-06-19 07:00:00.000',
value: 3.92,
},
{
date: '2023-06-19 08:00:00',
condition: '已审核',
sortTime: '2023-06-19 08:00:00.000',
value: 4.52,
},
{
date: '2023-06-19 09:00:00',
condition: '已审核',
sortTime: '2023-06-19 09:00:00.000',
value: 4.18,
},
{
date: '2023-06-19 10:00:00',
condition: '已审核',
sortTime: '2023-06-19 10:00:00.000',
value: 4.27,
},
{
date: '2023-06-19 11:00:00',
condition: '已审核',
sortTime: '2023-06-19 11:00:00.000',
value: 4.08,
},
{
date: '2023-06-19 12:00:00',
condition: '未审核',
sortTime: '2023-06-19 12:00:00.000',
value: 4.55,
},
{
date: '2023-06-19 13:00:00',
condition: '未审核',
sortTime: '2023-06-19 13:00:00.000',
value: 4.18,
},
{
date: '2023-06-19 14:00:00',
condition: '未审核',
sortTime: '2023-06-19 14:00:00.000',
value: 4.49,
},
];

const chart = new Chart({
container: 'container',
theme: 'classic',
autoFit: true,
});

chart
.line()
.data({
type: 'inline',
value: data,
})
.scale('y', { nice: true })
.scale('color', {
domain: ['未审核', '已审核'],
range: ['#858685', '#30cb13'],
})
.encode('x', (d) => new Date(d.date))
.encode('y', 'value')
.encode('shape', 'hvh')
.encode('color', 'condition')
.encode('series', () => 'a')
.style('gradient', 'x')
.style('lineWidth', 2)
.axis('x', { title: '日期' });

chart.render();

[hustcc]

我在我这测试可以正常运行。然后你写的那个问题是 warning，应该不是导致卡死的原因。

卡死的问题，可以帮忙在你的电脑环境帮忙多测试测试吗？