Chart.js如何为条形图的每个条形添加自定义图例？

我来帮你搞定这个自定义图例的需求！其实只需要做几个小修改就能实现，下面一步步来：

1. 先建立数字与自定义文本的映射关系 #

首先我们需要一个对象来存储每个数字对应的自定义标签，你可以根据自己的需求补充完整：

var orderLabelMap = {
  '1': 'CP',
  '2': 'AA',
  '3': 'BB',
  '4': 'CC',
  '5': 'DD',
  '6': 'EE',
  '7': 'FF',
  '8': 'GG',
  '9': 'HH',
  '10': 'II'
};

2. 替换X轴的显示标签 #

原来的X轴显示的是1、2...10，现在我们把它替换成对应的自定义文本，只需要修改barChartData里的labels属性：

labels: orders.map(order => orderLabelMap[order]),

3. 调整tooltip显示正确的自定义文本 #

如果你希望鼠标hover到条形上时，tooltip也显示自定义标签（而不是原来的数字），可以修改tooltipTemplate：

tooltipTemplate: function(valuesObject) {
  // 从映射表中获取对应的自定义标签
  var customLabel = orderLabelMap[valuesObject.label];
  return "Order: " + customLabel + " | Value: " + valuesObject.value;
},

4. （可选）在条形旁额外标注自定义文本 #

如果除了X轴和tooltip，你还想在每个条形的上方或者旁边直接显示自定义标签，可以在你自定义的BarAlt类的draw方法里添加绘制文本的逻辑：

draw: function() {
  Chart.types.Bar.prototype.draw.apply(this, arguments);
  
  // 绘制自定义标签到每个条形上方
  var ctx = this.chart.ctx;
  this.datasets[0].bars.forEach(function(bar) {
    // 获取当前条形对应的自定义标签
    var customLabel = orderLabelMap[bar.label];
    ctx.fillStyle = '#333';
    ctx.font = '12px Arial';
    ctx.textAlign = 'center';
    // 在条形上方居中绘制文本
    ctx.fillText(customLabel, bar.x, bar.y - 10);
  });

  // 保留你原来绘制横线的逻辑
  ctx.beginPath();
  ctx.moveTo(25, 50);
  ctx.lineTo(1000, 50);
  ctx.stroke();
}

完整修改后的代码 #

下面是整合了所有修改的完整代码，你可以直接使用：

$(document).ready(function() { initData(); });
function initData() { loadChartVorselektion(); }
function loadChartVorselektion() {
var randomScalingFactor = function() { return Math.round(Math.random() * 70) };
var orders = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

// 新增：数字到自定义标签的映射表
var orderLabelMap = {
  '1': 'CP',
  '2': 'AA',
  '3': 'BB',
  '4': 'CC',
  '5': 'DD',
  '6': 'EE',
  '7': 'FF',
  '8': 'GG',
  '9': 'HH',
  '10': 'II'
};

var barChartData = {
 labels: orders.map(order => orderLabelMap[order]), // 修改：替换X轴标签为自定义文本
 datasets: [{
 label: "Order",
 fillColor: "rgba(0, 62, 76,0.8)",
 highlightFill: "rgba(151,187,205,0.75)",
 data: [6, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), 5, 6 ]
 }]
}
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
Chart.types.Bar.extend({
 name: "BarAlt",
 initialize: function(data) {
 Chart.types.Bar.prototype.initialize.apply(this, arguments);
 },
 draw: function() {
 Chart.types.Bar.prototype.draw.apply(this, arguments);
 
 // 新增：在条形上方绘制自定义标签
 var ctx = this.chart.ctx;
 this.datasets[0].bars.forEach(function(bar) {
   var customLabel = orderLabelMap[bar._model.label];
   ctx.fillStyle = '#333';
   ctx.font = '12px Arial';
   ctx.textAlign = 'center';
   ctx.fillText(customLabel, bar._model.x, bar._model.y - 10);
 });

 // 保留原有的横线绘制逻辑
 this.chart.ctx.beginPath();
 this.chart.ctx.moveTo(25, 50);
 this.chart.ctx.lineTo(1000, 50);
 this.chart.ctx.stroke();
 }
});
var chart = new Chart(ctx).BarAlt(barChartData, {
 responsive: true,
 animation: true,
 barValueSpacing: 5,
 barDatasetSpacing: 1,
 tooltipFillColor: "rgba(0,0,0,0.8)",
 tooltipTemplate: function(valuesObject) {
   // 修改：tooltip显示自定义标签和数值
   var customLabel = orderLabelMap[valuesObject.label];
   return "Order: " + customLabel + " | Value: " + valuesObject.value;
 },
});
}
}

这样修改后，你的条形图X轴会显示自定义的标签，tooltip也会对应显示，还会在每个条形上方标注自定义文本，完全满足你的需求啦！

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