Chart.js柱状图图片仅悬停显示及404错误的解决方法

问题根源 #

1. 404错误：
   • 重复引入不同版本的Chart.js导致依赖冲突，同时images数组中的null会触发插件加载无效的图片地址
2. 图片仅悬停显示：
   • 未明确配置插件的显示规则，插件默认行为导致图片仅在交互时出现

修复步骤及代码 #

1. 清理依赖，消除404 #

• 删除重复的Chart.js引入，保留与插件兼容的2.9.4版本
• 将images数组中的null替换为undefined，避免插件尝试加载无效地址

2. 配置插件确保图片始终显示 #

• 添加display: true强制图片持续显示
• 设置position: 'top'将图片固定在柱状条顶部
• 配置render: 'image'确保仅渲染图片，不显示额外数字

修改后的完整代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
<script>
new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'My Dataset',
      data: [25, 59, 80, 76],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      labels: {
        render: 'image',
        display: true, // 强制始终显示
        position: 'top', // 固定在柱状条顶部
        textMargin: 10,
        images: [
          {
            src: 'https://i.sstatic.net/9EMtU.png',
            width: 20,
            height: 20
          },
          undefined, // 替换null为undefined，避免无效请求
          {
            src: 'https://i.sstatic.net/9EMtU.png',
            width: 20,
            height: 20
          },
          undefined
        ]
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
</script>

额外说明 #

• 若图片位置需要微调，可调整textMargin数值，增大或减小与柱状条的间距
• 确保图片URL可正常访问，若使用自定义图片需替换为有效地址

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