Chart.js v4.5升级后折线图仅显示点无连线、无坐标轴标签的问题排查求助

嗨，我帮你排查出两个核心问题，刚好对应你遇到的两个现象，改完应该就能正常工作了：

1. 折线图只显示点不显示连线的原因 #

你在每个dataset里设置了borderWidth: 0！在Chart.js v3+版本中，折线的线条是通过borderWidth属性控制的，设为0等于把线条宽度设成了0，自然看不到连线，只能看到数据点。

修复方案：把dataset里的borderWidth改成大于0的值，比如borderWidth: 2，这样折线就会正常显示。另外注意你的borderColor和backgroundColor是分开设置的，确保borderColor是你想要的折线颜色。

2. 坐标轴标签不显示的核心错误 #

你的配置犯了Chart.js v3+版本的结构错误：scales配置被错误地嵌套在plugins对象内部！在Chart.js v3.x及以上版本中，scales是和plugins同级的顶层配置项，不属于plugins的子属性。

修复方案：把scales从plugins里移出来，放到options的顶层，和responsive、plugins同级：

const chartConfig = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      title: {
        display: true,
        text: 'Process Volume',
        padding: { top: 10, bottom: 30 }
      },
      legend: {
        display: true,
        labels: { color: 'rgb(0,0,0)' }
      },
      datalabels: {
        color: '#FF0000',
        backgroundColor: function (context) {
          return context.dataset.backgroundColor;
        },
        padding: 4,
        font: { weight: 'bold' },
        anchor: 'end',
        align: 'start',
        formatter: Math.round
      }
    },
    // 关键修改：将scales移到此处，与plugins同级
    scales: {
      x: {
        title: { display: true, text: 'Hour' },
        grid: { display: false },
        ticks: { color: '#555' }
      },
      y: {
        title: { display: true, text: 'Count' },
        beginAtZero: true,
        ticks: { stepSize: 20 }
      },
    }
  }
};

额外的升级注意事项（Chart.js 2.x → 4.x） #

1. 配置结构大调整：v3+完全重构了配置结构，很多原2.x的顶层配置（比如tooltips）的位置都变了，建议对照官方的2.x到3.x迁移文档梳理配置项，4.x是基于3.x的结构兼容的
2. 冗余属性清理：v3+里showLines属性已经被移除了，折线图默认就会显示线条，你可以把这个属性删掉；spanGaps设置为true是没问题的，能自动跳过空数据点
3. 插件兼容性：你用的datalabels（v2.2.0）和annotation（v2.1.1）版本是匹配Chart.js v4.x的，通过script标签引入会自动注册插件，这块不用改

修复后的单个dataset示例 #

{
  backgroundColor: "#8e5ea2",
  borderColor: "#4ad95a",
  borderStyle: "solid",
  borderWidth: 2, // 从0修改为2
  data: [20,4,16,14,101,0,40,4,3,20,3,7,1,0,39,30,0,1,4,11,1075,156,6,null],
  fill: false,
  label: "Items Processed",
  spanGaps: true
}

改完这两处，你的折线图应该就能正常显示连线和坐标轴标签了，试试吧！

内容来源于stack exchange