Сгруппированная гистограмма response-chartjs, зависшая над группой, отображает только последний бар - PullRequest
Новая
       41

Сгруппированная гистограмма response-chartjs, зависшая над группой, отображает только последний бар

0 голосов
/ 10 декабря 2018

Поэтому я пытаюсь создать сгруппированную гистограмму с настраиваемой всплывающей подсказкой в ​​chartjs с response-chartjs-2

Версия Chart.js: 2.7.3 версия response-chartjs: 2.7.4

Для проекта, над которым я работаю, мне понадобится возможность навести курсор на каждую группу данных и показать подсказку.

Я следую инструкциям по рисованию всплывающей подсказки: настраиваемая подсказка

Проблема в том, что, когда я наводю курсор мыши на группу и нахожу другую группу, у меня возникает эта странная проблема рендеринга, когда она отображает только последний индекс баров.Это можно решить, объявив параметр перерисовки, но для этого есть еще одна проблема с непрерывно мерцающим графиком.

Это странное поведение не появляется, если я явно устанавливаю свои данные в setState, передаю их в панельграф компонент.Однако setState, если он не передан в аргументах, должен был оставить переменную data в одиночку.

Я могу прикрепить изолированную программную среду кода для проблемы: пример Я хочу, чтобы все те же функции / возможности зависали ипоказать всплывающую подсказку без проблемы рендеринга.

Возможно, это не ошибка, может быть, она может работать с другим подходом

Для людей, которые не открывают пример кода: 

const options = {
  hover: {
    onHover: e => {
      if (e && e.target) {
        e.target.style.cursor = "pointer"
      }
    },
  },
  layout: {
    padding: {
      left: 10,
    },
  },
  legend: {
    display: false,
  },
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    xAxes: [
      {
        gridLines: { display: false },
      },
    ],
    yAxes: [
      {
        gridLines: { display: true },
        ticks: {
          beginAtZero: true,
        },
      },
    ],
  },
  tooltips: {
    enabled: false,
    mode: "index",
  },
}

const chartData = {
  datasets: [
    { data: [10, 20, 30, 50], label: "zz", backgroundColor: "#4286f4" },
    { data: [30, 20, 10, 40], label: "zz", backgroundColor: "#e5f94a" },
    { data: [0, 15, 20, 30], label: "zz", backgroundColor: "#f2264c" },
  ],
  labels: ["01/12", "02/12", "03/12", "04/12"],
}
...