feat(line): support render missing data

[pearmini]

Line 渲染缺失数据

当有不合法数据时候渲染折线图。

不链接缺失数据

(() => {
  const chart = new G2.Chart();

  chart
    .line()
    .data({
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
      transform: [
        // 模拟数据缺失
        {
          type: 'map',
          callback: (d) =>
            Object.assign(d, {
              close: d.date.getUTCMonth() < 3 ? NaN : d.close,
            }),
        },
      ],
    })
    .encode('x', 'date')
    .encode('y', 'close');

  return chart.render().node();
})();

连接缺失数据

(() => {
  const chart = new G2.Chart();

  chart
    .line()
    .data({
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
      transform: [
        // 模拟数据缺失
        {
          type: 'map',
          callback: (d) =>
            Object.assign(d, {
              close: d.date.getUTCMonth() < 3 ? NaN : d.close,
            }),
        },
      ],
    })
    .encode('x', 'date')
    .encode('y', 'close')
    .style('connectNull', true);

  return chart.render().node();
})();

设置连接缺失数据区间线段的样式

(() => {
  const chart = new G2.Chart();

  chart
    .line()
    .data({
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
      transform: [
        // 模拟数据缺失
        {
          type: 'map',
          callback: (d) =>
            Object.assign(d, {
              close: d.date.getUTCMonth() < 3 ? NaN : d.close,
            }),
        },
      ],
    })
    .encode('x', 'date')
    .encode('y', 'close')
    .style('missingStroke', 'red')
    .style('missingLineWidth', 10)
    .style('connectNull', true);

  return chart.render().node();
})();