Я пытаюсь создать гистограмму с возможностью поиска в ChartJS, где пользователь может динамически искать в поле ввода (onkeyup) имена меток оси x. Когда эта метка или метки «найдены», эта полоса (...

2
hieronymous_vis 7 Янв 2021 в 03:16

1 ответ

Лучший ответ

Обратите внимание, что dataset.backgroundColor может быть определен как string или как array строк. К сожалению, это не отражено четко в документации 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>
1
uminder 23 Янв 2021 в 11:21