react-native-chart-kit折线图：同一日期多值展示异常求助

react-native-chart-kit的LineChart默认会将labels数组的每一项视为独立X轴刻度，导致重复日期对应的数据点被分配到不同位置。以下是两种解决方案：

方案1：保留所有原始数据点，同一日期位置展示多个点 #

通过预处理数据，将同一日期的多个数据点拆分为独立数据集，每个数据集仅在对应日期位置有值，其余位置用null占位，确保所有数据集长度与唯一日期标签一致。

数据处理代码 #

// 原始数据
const rawPlotData = {
  "labels": ["18-03-2023", "18-03-2023", "03-05-2023", "29-05-2023", "30-05-2023", "07-06-2023", "09-06-2023", "09-06-2023", "09-06-2023", "09-06-2023", "04-07-2023", "04-07-2023", "04-07-2023", "04-07-2023"],
  "datasets": [{ "data": [75,89,80,110,120,90,94,90,90,90,60,80,90,75] }]
};

// 按日期分组原始数据
const groupedByDate = {};
rawPlotData.labels.forEach((date, idx) => {
  const value = rawPlotData.datasets[0].data[idx];
  if (!groupedByDate[date]) groupedByDate[date] = [];
  groupedByDate[date].push(value);
});

// 生成唯一日期标签和多数据集
const uniqueLabels = Object.keys(groupedByDate);
const multiDatasets = [];

Object.entries(groupedByDate).forEach(([date, values]) => {
  values.forEach(val => {
    const dataArr = new Array(uniqueLabels.length).fill(null);
    dataArr[uniqueLabels.indexOf(date)] = val;
    multiDatasets.push({ data: dataArr });
  });
});

// 处理后的最终数据
const processedPlotData = {
  labels: uniqueLabels,
  datasets: multiDatasets
};

修改后的折线图代码 #

<LineChart
  data={processedPlotData}
  width={screenWidth * 0.82}
  height={screenHeight / 2.5}
  verticalLabelRotation="30"
  yAxisInterval={1}
  chartConfig={{
    propsForBackgroundLines: {
      strokeDasharray: '',
    },
    propsForLabels: {
      fontFamily: 'Poppins-Regular',
    },
    backgroundColor: '#fff',
    backgroundGradientFrom: '#fff',
    backgroundGradientTo: '#fff',
    decimalPlaces: 0,
    color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
    propsForDots: {
      r: '6',
      strokeWidth: '2',
      color: colors.appPrimary,
      backgroundColor: colors.appPrimary,
    },
  }}
/>

方案2：合并同一日期数据（如取平均值） #

若业务无需展示所有原始数据点，可将同一日期的多个值合并（如计算平均值、最大值等），简化数据结构。

数据处理代码 #

// 原始数据同方案1
const rawPlotData = { /* 原始数据 */ };

// 按日期计算平均值
const averagedData = {};
rawPlotData.labels.forEach((date, idx) => {
  const value = rawPlotData.datasets[0].data[idx];
  if (!averagedData[date]) {
    averagedData[date] = { sum: 0, count: 0 };
  }
  averagedData[date].sum += value;
  averagedData[date].count += 1;
});

// 生成处理后的数据
const uniqueLabels = Object.keys(averagedData);
const processedPlotData = {
  labels: uniqueLabels,
  datasets: [{
    data: uniqueLabels.map(date => averagedData[date].sum / averagedData[date].count)
  }]
};

直接使用上述processedPlotData渲染折线图即可，此时每个日期仅对应一个合并后的数据点。

内容的提问来源于stack exchange，提问作者Pooja Rajendran C