嘿，我帮你找出了导致折线图不显示的几个关键问题，咱们一步步来修复：

核心问题分析 #

1. Chart.js版本不兼容的配置写法：你用的是Chart.js 3.4.0，但配置里还是沿用了v2版本的yAxes/xAxes数组格式，v3已经改成了对象式的scales.y/scales.x结构，这直接导致配置不生效。
2. Y轴刻度范围设置错误：你把Y轴的min设为50，但你的数据y值（12、21、32）都远低于这个值，数据点直接跑到了图表可视区域之外，自然看不到内容。
3. 时间轴配置缺失细节：v3中时间类型的坐标轴需要明确配置time选项，引导Chart.js正确解析日期格式。

修正后的完整代码 #

JavaScript部分 #

var chartTooltip = { 
  borderWidth: 0.5, 
  bodySpacing: 10, 
  xPadding: 15, 
  yPadding: 15, 
  cornerRadius: 0.15, 
  displayColors: false 
};

if (document.getElementById("areaChartNoShadow")) {
  var areaChartNoShadow = document.getElementById("areaChartNoShadow").getContext("2d");
  var myChart = new Chart(areaChartNoShadow, {
    type: "line",
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { // 替换v2的yAxes数组，改成v3的对象格式
          grid: { // v3里gridLines统一改成grid
            display: true, 
            lineWidth: 1, 
            color: "rgba(0,0,0,0.1)", 
            drawBorder: false 
          },
          ticks: { 
            beginAtZero: true, 
            stepSize: 5, 
            min: 0, // 把min改成0，让数据点回到可视范围内
            max: 70, 
            padding: 0 
          }
        },
        x: { // 替换v2的xAxes数组，改成v3的对象格式
          type: 'time',
          time: { // 新增time配置，明确日期解析规则
            unit: 'month', // 根据你的数据跨度，用月份作为刻度单位更合适
            tooltipFormat: 'YYYY-MM-DD HH:mm' // 自定义tooltip显示的日期格式
          },
          distribution: 'linear',
          grid: { // v3里gridLines改成grid
            display: false 
          }
        }
      },
      plugins: {
        datalabels: { display: false },
        tooltip: chartTooltip, // v3里tooltip配置需要放到plugins下
        legend: { display: false } // v3里legend配置也需要放到plugins下
      }
    },
    data: {
      datasets: [{
        label: "数据趋势",
        data: [
          { t: "2015-03-15T13:03:00Z", y: 12 }, 
          { t: "2015-03-25T13:02:00Z", y: 21 }, 
          { t: "2015-04-25T14:12:00Z", y: 32 } 
        ],
        pointRadius: 4,
        pointBorderWidth: 2,
        pointHoverRadius: 5,
        fill: true,
        borderWidth: 2,
        backgroundColor: 'rgba(54, 162, 235, 0.2)', // 新增填充色让区域更直观
        borderColor: 'rgba(54, 162, 235, 1)' // 明确折线颜色
      }]
    }
  });
}

HTML部分（原结构没问题，确认脚本顺序即可） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<div class="chart-container chart">
  <canvas style="padding: 25px;" id="areaChartNoShadow"></canvas>
</div>

关键修改说明 #

• Scale配置结构调整：适配v3的语法，把数组形式的yAxes/xAxes改成对象形式的y/x，同时gridLines统一更名为grid。
• Y轴范围修正：将min:50改为min:0，让数据点回到图表可视区域内。
• 时间轴配置完善：添加time选项指定刻度单位和tooltip格式，确保moment.js能正确解析ISO格式的日期。
• 插件配置迁移：v3中legend和tooltip都需要放到plugins对象下，原代码的直接写法在v3中是无效的。

这样修改后，你的折线图应该就能正常显示，并且X轴会正确以日期为刻度展示啦！

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