Chart.js散点图无内容显示问题调试，附完整可复现代码片段

你的代码存在3处核心错误导致散点图无法正常渲染，具体问题及修正方案如下：

核心错误说明 #

• 版本语法不匹配：你使用的是Chart.js 2.7.2版本，该版本坐标轴配置必须用xAxes、yAxes数组包裹配置项，你当前用的是3.x版本的x/y直接配置语法，2.x版本无法识别。
• 数据与轴错位：你代码中数据的x字段为数值（对应试验次数）、y字段为日期字符串，但x轴配置的标题是日期、y轴标题是试验次数，完全错位；且日期字符串没有指定对应轴的类型为时间类型，Chart.js无法将字符串解析为坐标值。
• 缺失依赖：Chart.js 2.x的时间轴需要依赖Moment.js完成日期解析，你当前没有引入该依赖，时间轴无法正常工作。

修正后完整代码 #

HTML部分

<!-- 先引入Moment.js依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

JS部分

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: "scatter",
  data: {
    datasets: [
      {
        label: "EARRINGS",
        data: [
          // 交换x、y取值，y为试验次数（数值），x为日期
          {
            y: 13,
            x: "19-07-2021"
          },
          {
            y: 5,
            x: "12-08-2021"
          }
        ],
        showLine: true,
        fill: false,
        borderColor: "rgb(125,60,122)"
      },
      {
        label: "RINGS",
        data: [
          {
            y: 4,
            x: "09-08-2021"
          },
          {
            y: 1,
            x: "06-08-2021"
          },
          {
            y: 9,
            x: "12-08-2021"
          }
        ],
        showLine: true,
        fill: false,
        borderColor: "rgb(125,60,122)"
      },
      {
        label: "BANGLES",
        data: [
          {
            y: 2,
            x: "06-08-2021"
          },
          {
            y: 1,
            x: "12-08-2021"
          }
        ],
        showLine: true,
        fill: false,
        borderColor: "rgb(125,60,122)"
      },
      {
        label: "NECKLACES",
        data: [
          {
            y: 1,
            x: "12-08-2021"
          }
        ],
        showLine: true,
        fill: false,
        borderColor: "rgb(125,60,122)"
      }
    ]
  },
  options: {
    scales: {
      // 2.x版本用xAxes数组配置x轴
      xAxes: [{
        type: 'time', // 指定x轴为时间类型
        time: {
          parser: 'DD-MM-YYYY', // 匹配你的日期格式
          unit: 'day'
        },
        scaleLabel: { // 2.x版本轴标题用scaleLabel配置
          display: true,
          labelString: "Date"
        },
        ticks: {
          precision: 0,
          maxTicksLimit: 9
        }
      }],
      // 2.x版本用yAxes数组配置y轴
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: "No of Trials"
        },
        ticks: {
          precision: 0,
          beginAtZero: true
        }
      }]
    }
  }
});

补充说明 #

如果你不想额外引入Moment.js，也可以把所有日期字符串提前转换为毫秒级时间戳作为x值，就可以不用引入时间解析依赖，同时可以删掉x轴的time.parser配置项。

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