如何使用Recharts绘制两条独立折线？

DevOps 小满

2026-8-14

数据绘图失败的解决思路

1. 修正数据类型

你的y值是字符串格式（比如"0.397"），大部分绘图库需要数值类型才能正确渲染，先把所有y值转为数字，同时将日期字符串转为可识别的Date对象：

const processedData = DATA.map(series => ({
  ...series,
  data: series.data.map(point => ({
    x: new Date(point.x),
    y: parseFloat(point.y)
  }))
}));

2. 以Chart.js为例的完整实现代码

如果使用Chart.js，完整可运行的示例如下：

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const DATA = [
  {
    name: '0',
    data: [
      {x: "07/16/20 01:50", y: "0.397"},
      {x: "07/16/20 02:51", y: "0.480"},
      {x: "07/16/20 02:52", y: "0.416"},
      {x: "07/16/20 02:53", y: "0.396"},
      {x: "07/16/20 02:54", y: "0.418"},
      {x: "07/16/20 02:55", y: "0.390"}
    ]
  },
  {
    name: '1',
    data: [
      {x: "07/16/20 04:54", y: "0.384"},
      {x: "07/16/20 05:57", y: "0.432"}
    ],
  }
];

// 预处理数据
const processedData = DATA.map(series => ({
  label: series.name,
  data: series.data.map(point => ({
    x: new Date(point.x),
    y: parseFloat(point.y)
  })),
  borderColor: series.name === '0' ? '#FF6384' : '#36A2EB',
  fill: false
}));

// 初始化图表
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    datasets: processedData
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'minute',
          displayFormats: {
            minute: 'MM/DD/YY HH:mm'
          }
        }
      },
      y: {
        beginAtZero: false
      }
    }
  }
});
</script>