胜利图表——突破线

问题描述

是否可以打破胜利图中的情节线？我可以通过制作两条相同颜色的不同情节线来做到这一点，但我正在寻找一种自动方式。我有很多零的数据，我只想要曲线。如果我删除零值，线条就会连接起来。

我有这个。这些线在轴原点下方的零处连接：

我想要这个：

解决方法

我使用这个函数从一个带有零的数组中创建了多条数据线：

export function breakLine(buffer: any[],startTime: any) {
  let zeroCounter = 0;
  let signalCounter = 0;
  let curr: any[] = [];
  let result: any[] = [];
  buffer.forEach((value: any) => {
    // any value less than 20 will be considered a zero
    if (value.result[0] < 20) {
      zeroCounter++;
    } else {
      curr = [
        ...curr,{
          x: value.time - startTime,y: value.result[0],},];
      signalCounter++;
      zeroCounter = 0;
    }

    // break line on 3 or more consecutive zeroes
    if (zeroCounter >= 3 && signalCounter > 0) {
      result = add(curr,result);
      zeroCounter = 0;
      signalCounter = 0;
      curr = [];
    }
  });
  // remaining in current after loop
  result = add(curr,result);
  return result.filter((plot: any) => plot.length > 0);
}

I 为每个嵌套数组映射一行：

line1.map((data) =>
        <VictoryLine
        style={{
            data: { stroke: '#0000FF' },parent: { border: '1px solid #ccc' },}}
        data={data}
    />)