VueJS结合Laravel8 水平条形图无法隐藏坐标轴问题咨询

你当前配置达不到预期效果，核心原因有两个：一是仅关闭了网格线绘制，没有把坐标轴的轴线、刻度、标签完全隐藏；二是沿用了Chart.js 2.x的旧式坐标轴配置写法，在新版本中这类配置不会生效，同时也没有开启水平条形图的渲染模式。

具体修改操作 #

• 替换为Chart.js 3+版本兼容的坐标轴配置，彻底隐藏所有坐标轴可见元素
• 开启水平条形图渲染开关，将默认竖直条形转换为水平方向
• 修正组件传参的数据结构，避免图表渲染错位
• 关闭冗余的图例、悬浮提示组件，匹配你只需要单根进度条的展示需求

可直接替换的完整配置代码 #

// 替换原有的options字段配置
options: {
  responsive: true,
  indexAxis: 'y', // 关键开关：切换为水平条形图
  plugins: {
    legend: {
      display: false // 隐藏顶部默认图例
    },
    tooltip: {
      enabled: false // 不需要悬浮交互提示可直接关闭
    }
  },
  scales: {
    x: {
      display: false // 完全隐藏X轴（含轴线、刻度、文本标签）
    },
    y: {
      display: false // 完全隐藏Y轴（含轴线、刻度、文本标签）
    },
    grid: {
      drawOnChartArea: false
    }
  }
}

注意：如果你项目里安装的Chart.js版本为3.x及以上，原来写的xAxes: [{...}]、yAxes: [{...}]这类数组形式的旧配置已经全部废弃，不会被解析执行，必须换成上面的对象式写法才能生效。

模板侧代码调整 #

原代码中给<bar-chart>组件传递的data结构不符合vue-chartjs的渲染规范，需要调整为标准格式：

<bar-chart
  :options="options"
  :data="{
    labels: [''],
    datasets: [{
      data: [arr.value_div],
      backgroundColor: '#4F46E5', // 可自定义条形填充色
      barThickness: 12 // 适配120px画布宽度，设置合适的条形粗细
    }]
  }"
  width="120px"
  height="70px"
></bar-chart>

调整完成后即可得到完全无坐标轴、无冗余装饰的水平条形图，可直接和旁边的课程完成计数文本对齐展示。

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