Chart.js 3.6.0多轴折线图异常问题咨询：折线未连接且Y轴未显示数据集最大值

你的图表出现折线未连接、Y轴无法正确显示最大值的问题，核心原因是数据格式不符合Chart.js的要求——你把labels和datasets里的data都写成了逗号分隔的字符串，而Chart.js需要的是数组类型（labels为字符串数组，data为数值数组）。

具体问题点： #

• labels是一个长字符串，Chart.js会把它当作单个标签，导致X轴只有一个点，折线自然无法连接
• data是字符串格式的数值列表，Chart.js无法识别为数值，无法正确计算Y轴范围和绘制数据点

修正后的代码： #

<canvas id="canvas"></canvas> 
<script>
const ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.height = 200;

// 将字符串转为数组，labels直接split，data需要转为数值类型
const labels = "11/1/2021,11/2/2021,11/3/2021,11/4/2021,11/5/2021,11/6/2021,11/7/2021,11/8/2021,11/9/2021,11/10/2021".split(',');
const data = {
  labels: labels,
  datasets: [
    {
      label: "South",
      data: "6,4,2,4,3,1,0,9,3,0".split(',').map(Number), // 转成数值数组
      borderColor: "#0d47a1",
      backgroundColor: "#2196f3",
      yAxisID: "y",
    },
    {
      label: "North",
      data: "72,97,88,143,102,0,0,153,100,0".split(',').map(Number), // 转成数值数组
      borderColor: "#e65100",
      backgroundColor: "#ff9800",
      yAxisID: "y1",
    },
  ],
};

const config = {
  type: "line",
  data: data,
  options: {
    responsive: true,
    interaction: {
      mode: "index",
      intersect: false,
    },
    stacked: false,
    plugins: {
      title: {
        display: true,
        text: "Test",
      },
    },
    scales: {
      y: {
        type: "linear",
        display: true,
        position: "left",
      },
      y1: {
        type: "linear",
        display: true,
        position: "right",
        grid: {
          drawOnChartArea: false,
        },
      },
      x: {
        ticks: {
          maxRotation: 65,
          minRotation: 65,
          fontSize: 11,
        },
      },
    },
  },
};

window.myLine = new Chart(ctx, config);
</script>

关键修改说明： #

• 用split(',')把逗号分隔的字符串拆分成数组，让Chart.js能识别多个X轴标签和数据点
• 用map(Number)把字符串类型的数值转为真正的数字，这样Chart.js才能正确计算Y轴的最大值和绘制连续的折线

这样修改后，你的多轴折线图就能正常显示，折线会连接所有数据点，左右Y轴也会根据各自数据集的最大值自动调整范围。

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