Apexcharts，连接系列线

Question

我在尝试连接 apexcharts 中的 2 个系列线时遇到问题。

{
name: 'trend-1'
trend: [
      {
        time: '2024-02-15 00:00',
        value: '99.6',
      },
      { time: '2024-02-15 01:00', value: '98.7' },
      {
        time: '2024-02-15 02:00',
        value: '98.1',
      },
      { time: '2024-02-15 03:00', value: '97.2' },
      {
        time: '2024-02-15 04:00',
        value: '97.0',
      },
      { time: '2024-02-15 05:00', value: '98.2' },
      { time: '2024-02-15 06:00', value: '98.5' },
    ],
target: '98.0'
}

我可以使用下面的代码将这些数据处理成绿色和红色系列线

const greenSeries = {
  name: 'KPI -1',
  data: data.trend.map(item => ({
    x: item.time,
    y: parseFloat(item.value) >= parseFloat(data.target) ? item.value : null
  }))
};

const redSeries = {
  name: 'KPI -1',
  data: data.trend.map(item => ({
    x: item.time,
    y: parseFloat(item.value) < parseFloat(data.target) ? item.value : null
  }))
};

这给出了这个输出

greenSeries =
    { 
        name: 'KPI -1',
        data: [
            {
                x: '2024-02-15 00:00',
                y: '99.6',
            },
            {
                x: '2024-02-15 01:00'
                y: '98.7',
            },
            {
                x: '2024-02-15 02:00'
                y: '98.1',
            },
            {
                x: '2024-02-15 03:00'
                y: null,
            },
            {
                x: '2024-02-15 04:00'
                y: null,
            },
            {
                x: '2024-02-15 05:00'
                y: '98.2',
            },
            {
                x: '2025-02-15 06:00'
                y: '98.1',
            }
        ]
    }


redSeries =
    { 
        name: 'KPI -1',
        data: [
            {
                x: '2024-02-15 00:00',
                y: null,
            },
            {
                x: '2024-02-15 01:00'
                y: null,
            },
            {
                x: '2024-02-15 02:00'
                y: null,
            },
            {
                x: '2024-02-15 03:00'
                y: '97.2',
            },
            {
                x: '2024-02-15 04:00'
                y: '97.0',
            },
            {
                x: '2024-02-15 05:00'
                y: null,
            },
            {
                x: '2024-02-15 06:00'
                y: null,
            }
        ]
    }

图表看起来像这样...

我一直在努力解决的问题是加入队列......

从最顶部的数据来看，目标是 98.0，因此如果高于目标则为绿色，如果低于目标则为红色。

请问如何将绿色到红色以及红色到绿色的线条连接起来？

同时还包括处理，比如说，一开始就低于目标，可能会有不止一个低于目标的情况等等....

Answer 1

要连接从绿色到红色以及从红色到绿色的线条，您需要修改数据结构以包含线条颜色变化的点。您可以通过引入

null

点来实现此目的，其中线条从绿色过渡到红色或从红色过渡到绿色。 你可以这样做：

const greenSeries = {
  name: 'KPI -1',
  data: [],
};

const redSeries = {
  name: 'KPI -1',
  data: [],
};

let previousColor = parseFloat(data.trend[0].value) >= parseFloat(data.target) ? 'green' : 'red';

data.trend.forEach(item => {
  const currentValue = parseFloat(item.value);
  const currentColor = currentValue >= parseFloat(data.target) ? 'green' : 'red';
  
  if (currentColor !== previousColor) {
    // Add a null point to the opposite series to signify the transition
    if (previousColor === 'green') {
      redSeries.data.push({
        x: item.time,
        y: null,
      });
    } else {
      greenSeries.data.push({
        x: item.time,
        y: null,
      });
    }
  }
  
  // Add the current point to the appropriate series
  if (currentColor === 'green') {
    greenSeries.data.push({
      x: item.time,
      y: currentValue,
    });
  } else {
    redSeries.data.push({
      x: item.time,
      y: currentValue,
    });
  }
  
  previousColor = currentColor;
});

// Add the last null point if the last value was green
if (previousColor === 'green') {
  redSeries.data.push({
    x: data.trend[data.trend.length - 1].time,
    y: null,
  });
} else {
  greenSeries.data.push({
    x: data.trend[data.trend.length - 1].time,
    y: null,
  });
}

这将确保图表上的线条正确连接。