gradient style 导致 line 绘制异常

[Aarebecca]

异常 DEMO

期望效果

基于 sample 拆分为两条线，绘制形状为 hvh ，上色规则与多色折线图一致

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

const data = [
  { sample: 's1', date: 1, value: 2, condition: 'CLR' },
  { sample: 's1', date: 2, value: 3, condition: 'CLR' },
  { sample: 's1', date: 3, value: 4, condition: 'VV' },
  { sample: 's1', date: 4, value: 5, condition: 'VV' },
  { sample: 's1', date: 5, value: 4, condition: 'CLR' },
  { sample: 's1', date: 6, value: 3, condition: 'CLR' },
  { sample: 's2', date: 1, value: 3, condition: 'CLR' },
  { sample: 's2', date: 2, value: 2, condition: 'VV' },
  { sample: 's2', date: 3, value: 1, condition: 'VV' },
  { sample: 's2', date: 4, value: 0, condition: 'VV' },
  { sample: 's2', date: 5, value: 1, condition: 'CLR' },
  { sample: 's2', date: 6, value: 2, condition: 'CLR' },
];

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

chart
  .line()
  .data(data)
  .scale('y', { nice: true })
  .scale('color', { domain: ['CLR', 'VV '], range: ['deepskyblue', '#666666'] })
  .encode('x', 'date')
  .encode('y', 'value')
  .encode('shape', 'hvh')
  .encode('color', 'condition')
  .encode('series', 'sample')
  // trouble spot
  .style('gradient', 'x')
  .style('lineWidth', 2)
  .axis('x', { title: 'date' });

chart.render();

现有问题

• 折线绘制不正确，疑似存在首尾相连情况
• 颜色渲染不正确、图例颜色不正确