ChartJS水平柱状图双数值坐标轴Y轴不显示问题求解

核心错误原因 #

• 配置层级错误：你当前的scales配置写在了options同级位置，ChartJS要求坐标轴配置必须放在options.scales下，这是Y轴完全不展示的核心原因
• 坐标轴类型未声明：水平柱状图默认将Y轴识别为分类轴，需要手动指定Y轴type为linear才能启用数值轴模式
• 字体配置不规范：ticks.font直接写数值24不符合ChartJS配置规范，需要通过font.size指定字号
• 数据集为空：当前datasets没有绑定你提供的坐标数据，需要完成数据绑定才能正常渲染

修正后完整配置 #

config: {
  type: "bar",
  data: {
    datasets: [{
      label: '数据系列',
      data: [
        {"x": 86, "y": 20},
        {"x": 255, "y": 21},
        {"x": 207, "y": 34},
      ],
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
      borderColor: 'rgb(54, 162, 235)',
    }],
  },
  plugins: [],
  options: {
    responsive: true,
    indexAxis: "y",
    elements: {
      bar: {
        borderWidth: 2,
      },
    },
    // scales配置移至options内部
    scales: {
      y: {
        type: 'linear', // 显式指定Y轴为数值轴
        position: "left",
        stacked: false, // 关闭堆叠效果
        ticks: {
          color: "blue",
          font: {
            size: 24
          }
        },
      },
      x: {
        type: 'linear',
        position: 'bottom',
        stacked: false
      }
    }
  },
}

如果需要更精准控制坐标轴的数值范围、间隔，可以在对应轴的配置下添加min、max、stepSize参数自定义。

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