Angular中使用ng2-charts绘制自定义刻度水平条形图并翻转坐标轴

无需修改原始业务数据，仅调整barChartOptions1的图表配置即可实现需求，修改后的配置如下：

public barChartOptions1: ChartOptions = {
  responsive: true,
  scales: {
    yAxes: [
      {
        display: true,
        reverse: true, // 翻转Y轴刻度顺序
        scaleLabel: {
          display: true,
          labelString: "",
          fontSize: 20
        },
      },
    ],
    // 新增X轴配置，自定义刻度显示规则
    xAxes: [
      {
        ticks: {
          min: 0,
          max: 2, // 数值和当前题目的选项数量保持一致即可
          stepSize: 1,
          callback: function(value) {
            // 将数值刻度映射为对应的选项文本
            const optionLabels = ["ans1", "ans2"];
            return optionLabels[value - 1] || "";
          }
        }
      }
    ]
  }
}

配置说明 #

• reverse: true 是核心配置，作用是直接翻转水平条形图Y轴的分类排列顺序，匹配你期望的刻度展示效果
• 如果选项是动态生成的，可以提前把每个题目对应的responses数组存储为全局可调用的变量，在callback函数中直接取对应下标的文本即可，无需写死选项内容
• 如果你使用的是Chart.js 3.x版本，配置语法略有调整：scales下不再使用xAxes/yAxes数组格式，直接写x/y对象即可，reverse属性放在x/y的根节点下，ticks配置规则不变

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