Chart.js柱状图指定柱子改颜色遇报错：getElementsAtEvent不是函数

问题说明 #

需实现两种交互：点击柱状图柱子后选择颜色修改，或先选颜色再点击柱子应用颜色，但现有代码运行时报错：myChart.getElementsAtEvent is not a function at HTMLCanvasElement.ChangeColor

报错原因 #

Chart.js 3.x及以上版本已移除getElementsAtEvent方法，该API是旧版本（v2及以下）的用法，新版本改用getActiveElements来获取点击的图表元素。

修复及功能实现步骤 #

1. 替换旧API：将myChart.getElementsAtEvent(e)替换为myChart.getActiveElements()
2. 修正索引获取：新版本中元素的索引属性是index而非旧版的_index
3. 新增先选颜色再点柱子的逻辑：添加变量selectedColor记录用户预先选择的颜色，点击柱子时直接应用；若未预先选颜色，则弹出颜色选择器选色后应用

修改后的完整代码 #

HTML代码 #

<div class="chartBox">
  <canvas id="myChart"></canvas>
  <input type="color" id="colorPicker" hidden/>
</div>

JavaScript代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    var selectedColor = null;
    var lastClickedIndex = null;
    var canvas = document.getElementById("myChart");
    var colorPicker = document.getElementById('colorPicker');

    // 保留原有业务逻辑（若需要）
    // document.getElementById("my-select").addEventListener("change", changeChart);
    // document.getElementById("filter").addEventListener("change", filterChart);

    // 数据部分保留原有传入逻辑，此处用示例数据占位
    var label = ['A', 'B', 'C', 'D', 'E', 'F'];
    var data = [12, 19, 3, 5, 2, 3];
    const originalLabels = label;
    const originalData = data ;

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: originalLabels,
            datasets: [{
                label: '# of Votes',
                data: originalData,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 点击画布（柱子）触发颜色修改逻辑
    canvas.addEventListener("click", handleChartClick, false);
    // 颜色选择器值变化时应用颜色
    colorPicker.addEventListener("change", applySelectedColor, false);
    // 点击颜色选择器时记录当前选中的颜色
    colorPicker.addEventListener("click", () => {
        selectedColor = colorPicker.value;
    });

    // 处理图表点击事件
    function handleChartClick(e) {
        e.preventDefault();
        const activeElements = myChart.getActiveElements();
        if (activeElements.length === 0) return;
        
        lastClickedIndex = activeElements[0].index;
        
        // 已预先选色则直接应用
        if (selectedColor) {
            updateColumnColor(lastClickedIndex, selectedColor);
            selectedColor = null; // 重置已选颜色
        } else {
            // 未选色则弹出颜色选择器
            colorPicker.click();
        }
    }

    // 应用选择的颜色到柱子
    function applySelectedColor(e) {
        if (lastClickedIndex !== null) {
            updateColumnColor(lastClickedIndex, e.target.value);
        }
    }

    // 更新指定柱子的背景色和边框色
    function updateColumnColor(index, color) {
        // 转换为带透明度的背景色（保持原0.2透明度）
        const bgColor = color.startsWith('#') ? `${color}33` : color.replace(/rgb\((.*)\)/, 'rgba($1, 0.2)');
        // 边框色用纯色
        const borderColor = color.startsWith('#') ? color : color.replace(/rgba\((.*),.*\)/, 'rgb($1)');
        
        myChart.data.datasets[0].backgroundColor[index] = bgColor;
        myChart.data.datasets[0].borderColor[index] = borderColor;
        myChart.update();
    }
</script>

功能说明 #

• 点击柱子选色修改：点击任意柱子，弹出颜色选择器，选色后柱子颜色自动更新
• 先选颜色再点柱子：取消颜色选择器的hidden属性临时显示后，选好颜色再点击柱子，即可将颜色应用到目标柱子上

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