Поместите всплывающую подсказку на середину двух полос - PullRequest
Новая
       9

Поместите всплывающую подсказку на середину двух полос

0 голосов
/ 10 октября 2018

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

function setupTooltipPosition(config) {
  const { tooltipElement, tooltipModel } = config;
  const leftOffset = this._chart.canvas.offsetLeft;
  const topOffset = this._chart.canvas.offsetTop;

  tooltipElement.removeClass(tooltipSelectors.hide);
  tooltipElement.css('left', `${tooltipModel.caretX - leftOffset}px`);
  tooltipElement.css('top', `${tooltipModel.carteY - topOffset}px`);
}

Используя этот подход в данном конкретном случае, я получил такой результат:

[Tooltip positioned using default implementation]

Я такжепопытался использовать значения x и y для tooltipModel, однако это не добавляет смысла в том, как поместить подсказку в середину.Если вы попытались добавить пользовательское смещение, чтобы поместить его в середину, это работает только для этого случая, но когда вы добавляете больше данных, это не работает.У меня может быть не более 2 наборов данных, однако пользователь может добавить не более 10 значений данных, что означает 10 групп баров.

Вопрос в том, что есть способ поместить всплывающую подсказку в середину группы баров (или один столбец, если у пользователя только 1 набор данных), используя значения, которые Chart.js предоставляет для всплывающих подсказок.?Или в другом случае, знаете ли вы какой-нибудь индивидуальный подход к центрированию всплывающей подсказки?

Спасибо !!

1 Ответ

0 голосов
/ 11 октября 2018

Вы не указываете, означает ли «середина» на оси х и / или у.Но так как вы написали:

... в середине двух столбцов ...

Я предполагаю, что вы имеете в виду по оси X.В этом случае вам нужно установить для свойства options.tooltips.mode значение index.Ниже приведен рабочий пример. 

let myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['x', 'y', 'z'],
    datasets: [{
      label: '1993',
      data: [50, 30, 65],
      backgroundColor: '#503291'
    }, {
      label: '1994',
      data: [60, 15, 65],
      backgroundColor: '#1bbecd'
    }]
  },
  options: {
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        barPercentage: 1
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Для будущих вопросов, пожалуйста, предоставьте MCVE , так как это поможет вам быстрее и проще помочь.

...