Javascript 如何使用onkeyup输入突出显示ChartJS中的条形图

我试图在ChartJS中创建一个“可搜索”的条形图，用户可以在输入字段（onkeyup）中动态搜索x轴标签的名称。当“找到”一个或多个标签时，该条（或那些条）将以不同的颜色高亮显示

我不知道如何链接“输入”文本和突出显示栏的函数

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">

小提琴演奏中

目前，搜索不起作用，因为输入未链接到突出显示该条的函数

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">

特别是第21行和从我的小提琴第66行开始的函数。函数取自此问题：）。这个问题和那个问题的区别在于，这个问题有一个选择下拉输入。相反，我尝试使用onkeyup动态输入

---

提前感谢

请注意，

数据集。backgroundColor

可以定义为

字符串

或字符串的

数组。不幸的是，这并没有在报告中得到明确反映

为了突出显示特定的条，您需要将dataset.backgroundColor定义为相同颜色的数组，但所需索引处的颜色必须不同

这可以通过以下简单的函数完成

function highlightMatchingBar() {
  var searchValue = document.getElementById('search').value.toUpperCase();
  chart.data.datasets[0].backgroundColor = labels.map(v => v.toUpperCase() == searchValue ? 'red' : 'green');
  chart.update();
}

请看一下下面的可运行代码片段，输入任何有效的动物名称（大小写无关），然后看看它是如何工作的


const标签=[“牛”、“马”、“狗”、“猫”、“鸟”、“鱼”、“羊”、“羊”、“羊”、“老鼠”、“兔子”、“蜜蜂”、“老鼠”、“猪”、“苍蝇”]；
常量图表=新图表（document.getElementById（'myChart'）{
类型：'bar'，
数据：{
标签：标签，
数据集：[{
标签：“我的数据集”，
数据：labels.map（l=>Math.floor（Math.random（）*1000）+1），
背景颜色：“绿色”
}]
},
选项：{
图例：{
显示：假
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
函数highlightMatchingBar（）{
var searchValue=document.getElementById（'search'）.value.toUpperCase（）；
chart.data.dataset[0].backgroundColor=labels.map（v=>v.toUpperCase（）==searchValue？'red'：'green'）；
chart.update（）；
}

效果很好。非常感谢！事实上，你知道怎么用一个以上的字母吗？例如，一个完整的单词来搜索标签？@hieronymous_-vis：我调整了我的答案来说明它是如何与完整的单词一起工作的。是否可以更动态地搜索？如果我加上“o”，那么所有带“o”的单词都会突出显示。然后，如果我继续输入'og'，它就会缩小到'dog'