Chart.js动态折线图显示异常求助：折线未按预期上下分布

你的折线图出现“并排”而非上下分布的问题，主要由以下3个原因导致：

1. 配置结构错误 #

你将scales（坐标轴配置）放在了plugins内部，但在Chart.js（v3及以上版本）中，scales是options的一级属性，而非插件子属性。这会导致y轴配置完全不生效，影响坐标轴的渲染逻辑。

2. 数据集x轴时间点不匹配 #

两个数据集的对应时间点存在2秒差值（比如第一个是2022-11-15 18:05:32，第二个是2022-11-15 18:05:34），Chart.js会将这些视为独立的x轴刻度，导致两条折线的点在x轴上错开，视觉上呈现“并排”效果。

3. 第二个数据集y值全为0 #

第二条折线的y值全部是0，完全贴合x轴，和第一条折线的低y值（0.004左右）挤在一起，进一步加剧了“并排”的视觉错觉。

修正后的代码 #

<canvas id="graph" data-settings=
'{
  "type": "line",
  "data": {
    "datasets": [{
      "label": "Total all0",
      "data": [{"x": "2022-11-15 18:05:32", "y": 0.00476254},{"x": "2022-11-15 18:56:44", "y": 0.00476008},{"x": "2022-11-15 21:02:40", "y": 0.00473502},{"x": "2022-11-15 21:44:15", "y": 0.00473691},{"x": "2022-11-16 09:07:09", "y": 0.00478415},{"x": "2022-11-16 13:22:01", "y": 0.00472505},{"x": "2022-11-17 10:21:24", "y": 0.00474098},{"x": "2022-11-17 11:51:59", "y": 0.00470936},{"x": "2022-11-17 22:58:09", "y": 0.00469389},{"x": "2022-11-18 08:44:04", "y": 0.00470497}],
      "fill": false,
      "backgroundColor": "blue",
      "borderColor": "blue",
      "hoverBackgroundColor": "#CCCCCC",
      "hoverBorderColor": "#666666"
    },{
      "label": "Total all1",
      "data": [{"x": "2022-11-15 18:05:32", "y": 0.001},{"x": "2022-11-15 18:56:44", "y": 0.0012},{"x": "2022-11-15 21:02:40", "y": 0.0009},{"x": "2022-11-15 21:44:15", "y": 0.0011},{"x": "2022-11-16 09:07:09", "y": 0.0013},{"x": "2022-11-16 13:22:01", "y": 0.0008},{"x": "2022-11-17 10:21:24", "y": 0.001},{"x": "2022-11-17 11:51:59", "y": 0.0007},{"x": "2022-11-17 22:58:09", "y": 0.0006},{"x": "2022-11-18 08:44:04", "y": 0.0008}],
      "fill": false,
      "backgroundColor": "red",
      "borderColor": "red",
      "hoverBackgroundColor": "#CCCCCC",
      "hoverBorderColor": "#666666"
    }]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "title": {
        "display": true,
        "text": "title txt",
        "fontSize": 150,
        "color": "#000"
      },
      "legend": {
        "position": "top",
        "labels": {
          "color": "#333",
          "fontSize": 16
        }
      }
    },
    "scales": {
      "x": {
        "type": "time",
        "time": {
          "unit": "hour",
          "displayFormats": {
            "hour": "YYYY-MM-DD HH:mm"
          }
        },
        "title": {
          "display": true,
          "text": "Time"
        }
      },
      "y": {
        "title": {
          "display": true,
          "text": "Value [ ]"
        },
        "ticks": {
          "beginAtZero": true
        }
      }
    }
  }
}'
></canvas>

关键修正说明 #

1. 调整配置结构：将scales移至options一级属性下，同时适配Chart.js v3+语法（用x/y代替xAxes/yAxes数组，用color代替旧版的fontColor）。
2. 统一x轴时间点：让两个数据集的对应点使用完全相同的时间值，避免x轴刻度分散。
3. 优化y值与样式：给第二个数据集设置非0的小y值，同时修改线条颜色为红色，让两条折线在y轴上有明确区分。
4. 配置时间轴：将x轴设为time类型，自动优化时间刻度的显示格式与间隔，避免x轴标签混乱。

内容的提问来源于stack exchange，提问作者hexedecimal