时间戳

首页 > 解决方案 > 如何使用 onkeyup 输入突出显示 ChartJS 中的条形图

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

问题描述

我正在尝试在 ChartJS 中制作一个“可搜索”条形图，用户可以在其中动态搜索输入字段 (onkeyup) 中的 x 轴标签名称。当“找到”一个或多个标签时，该条（或那些条）以不同的颜色突出显示。

我不确定如何链接“输入”文本和突出显示该栏的功能。

正在进行中 https://jsfiddle.net/hironymous_vis/mk0sLfgt/9/

目前，搜索不起作用，因为输入未链接到突出显示栏的功能。

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

和

function highlightBar(s) {
// this clears off any tooltip highlights
chart1.update();
chart1.activeElements = [];

// reset any coloring because of selection
chart1.datasets.forEach(function(dataset) {
    dataset.bars.forEach(function (bar) {
        if (bar.selected) {
            bar.fillColor = bar.selected.fillColor;
            bar.strokeColor = bar.selected.strokeColor;
            delete bar.selected;
        }
    })
});

var index = chart1.scale.xLabels.indexOf(this.value);
chart1.datasets.forEach(function (dataset) {
    var selectedBar = dataset.bars[index];

    // store the current values
    selectedBar.selected = {
        fillColor: selectedBar.fillColor,
        strokeColor: selectedBar.strokeColor
    }

    // now set the color
    selectedBar.fillColor = "red";
    selectedBar.strokeColor = "red";
});

chart1.update();
}

document.getElementById("myInput").onchange = highlightBar.bind(document.getElementById("myInput"));
document.getElementById("myInput").onchange();

具体来说，我的小提琴中的第 21 行和从第 66 行开始的函数。该函数取自这个问题：How to highlight single bar in bar chart using Chartjs）。这个问题和那个问题的区别在于那个问题有一个选择下拉输入。相反，我正在尝试使用 onkeyup 动态输入。

提前致谢

标签： javascripthtmlchart.js

解决方案

请注意，dataset.backgroundColor可以将其定义为 astring或 an arrayof 字符串。不幸的是，这在Chart.js 文档中没有清楚地反映。

为了突出显示特定条，您需要定义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 labels = ['Cow', 'Horse', 'Dog', 'Cat', 'Bird', 'Fish', 'Sheep', 'Goat', 'Mouse', 'Rabbit', 'Bee', 'Rat', 'Pig', 'Fly'];
const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: "My Dataset",
      data: labels.map(l => Math.floor(Math.random() * 1000) + 1),
      backgroundColor: 'green'
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

function highlightMatchingBar() {
  var searchValue = document.getElementById('search').value.toUpperCase();
  chart.data.datasets[0].backgroundColor = labels.map(v => v.toUpperCase() == searchValue ? 'red' : 'green');
  chart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<input id="search" type="text" id="myInput" onkeyup="highlightMatchingBar()" placeholder="Search...">
<canvas id="myChart" height="80"></canvas>

推荐阅读