Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true #5207

/**
 * A recreation of this demo: https://observablehq.com/@d3/variable-color-line
 */
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();