Chart JS：如何实现Y轴同类数据分组显示？

我用Chart JS绘制散点图展示条目时长（age），图表能正常加载并绘制数据，但同类type的条目无法在Y轴同一行分组显示（例如两个WER类型的数据）。需要强制图表将同类type的数据放在Y轴的同一行。现有代码如下：

原有JavaScript代码 #

var whatsNewArray = [{
    "type": "WER",
    "age": -16
  },
  {
    "type": "WER",
    "age": -58
  },
  {
    "type": "werty",
    "age": -36
  },
  {
    "type": "wert",
    "age": -95
  },
  {
    "type": "wert",
    "age": -94
  }
]

new Chart(document.getElementById("myWHATSNEWChart"), {
  type: 'scatter',
  data: {
    datasets: [{
      data: whatsNewArray.map(function(a) {
        return a.age;
      }),
      backgroundColor: ["#acc6ff"],
      label: "New Items",
      pointRadius: 10,
      fill: true
    }]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false,
    responsive: true,
    layout: {
      padding: 20
    },
    scales: {
      y: {
        ticks: {
          color: "#a3a3a3"
        },
        type: "category",
        labels: whatsNewArray.map(function(a) {
          return a.type;
        }),
        grid: {
          color: "#a3a3a3",
          borderColor: "#a3a3a3"
        }
      },
      x: {
        title: {
          display: true,
          text: "MINUTES AGO",
          color: "#a3a3a3"
        },
        ticks: {
          color: "#a3a3a3"
        },
        beginAtZero: true,
        grid: {
          color: "#a3a3a3",
          borderColor: "#a3a3a3"
        },
        border: {
          color: "#a3a3a3"
        }
      }
    },
    plugins: {
      legend: {
        display: false,
        title: {
          color: "#a3a3a3"
        },
        labels: {
          color: "#a3a3a3"
        }
      },
      title: {
        display: false,
        //text: 'What is New',
        color: "#a3a3a3"
      }
    }
  }
});

原有HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.dark.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<div class="chart-container mb-4" style="position: relative;width:100%;height:250px;background-color:#283044;">
  <canvas id="myWHATSNEWChart"></canvas>
</div>

解决方案 #

问题核心在于：当前Y轴直接使用原数组的所有type作为标签，导致重复的type生成独立的Y轴行。要实现同类型分组，需按以下步骤调整：

• 提取唯一的type列表，作为Y轴的刻度标签
• 将每个数据点的type映射为其在唯一列表中的索引，确保同类型数据对应同一个Y轴位置
• 调整散点图数据格式，每个点为{x: age值, y: type索引}的对象

修改后的完整代码 #

JavaScript代码

var whatsNewArray = [{
    "type": "WER",
    "age": -16
  },
  {
    "type": "WER",
    "age": -58
  },
  {
    "type": "werty",
    "age": -36
  },
  {
    "type": "wert",
    "age": -95
  },
  {
    "type": "wert",
    "age": -94
  }
];

// 提取唯一的type列表
const uniqueTypes = [...new Set(whatsNewArray.map(item => item.type))];

// 转换数据格式：每个点为{x: age, y: type对应的索引}
const chartData = whatsNewArray.map(item => ({
  x: item.age,
  y: uniqueTypes.indexOf(item.type)
}));

new Chart(document.getElementById("myWHATSNEWChart"), {
  type: 'scatter',
  data: {
    datasets: [{
      data: chartData,
      backgroundColor: "#acc6ff",
      label: "New Items",
      pointRadius: 10,
      fill: true
    }]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false,
    responsive: true,
    layout: {
      padding: 20
    },
    scales: {
      y: {
        ticks: {
          color: "#a3a3a3",
          // 使用唯一type列表作为Y轴刻度标签
          callback: function(value) {
            return uniqueTypes[value];
          }
        },
        grid: {
          color: "#a3a3a3",
          borderColor: "#a3a3a3"
        }
      },
      x: {
        title: {
          display: true,
          text: "MINUTES AGO",
          color: "#a3a3a3"
        },
        ticks: {
          color: "#a3a3a3"
        },
        beginAtZero: true,
        grid: {
          color: "#a3a3a3",
          borderColor: "#a3a3a3"
        },
        border: {
          color: "#a3a3a3"
        }
      }
    },
    plugins: {
      legend: {
        display: false,
        title: {
          color: "#a3a3a3"
        },
        labels: {
          color: "#a3a3a3"
        }
      },
      title: {
        display: false,
        color: "#a3a3a3"
      }
    }
  }
});

HTML代码（无需修改）

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.dark.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<div class="chart-container mb-4" style="position: relative;width:100%;height:250px;background-color:#283044;">
  <canvas id="myWHATSNEWChart"></canvas>
</div>

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