Chart.js всплывающая подсказка версии 2.5 выравнивание элементов по горизонтали

ProgramBox

Chart.js всплывающая подсказка версии 2.5 выравнивание элементов по горизонтали

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#javascript #chart.js #tooltip

#javascript #chart.js #всплывающая подсказка

Вопрос:

Я работаю над chart.js версия 2.5

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

Некоторые предварительные диаграммы имеют 20 значений.

Пожалуйста, проверьте прикрепленное изображение ниже.

Предполагаемые результаты:

Белый или кавказец и черный или афроамериканец в одном ряду
Азиатский другой и азиатский японский в другой строке

         tooltips: {
        mode: 'index',
        bodyFontSize: 14,
        titleFontSize: 14,
        xPadding: 20,
        yPadding: 20,
        multiKeyBackground: 'rgb(0,0,0)',
        callbacks: {
            label: function(tooltipItems, data) {
                var prefix = data.datasets[tooltipItems.datasetIndex].label;
                return prefix   " : "   tooltipItems.yLabel;
            },
            title: function(tooltipItems, data) {
                var value = tooltipItems[0].xLabel;
                return xAxisLabel   " : "   value;
            }
        }
    },

Я попытался реализовать пользовательскую всплывающую подсказку. как упоминалось в https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks но безуспешно.

Любая помощь приветствуется.

Обновить

После приведенного ниже ответа @Francisco Soares

я столкнулся с 1 проблемой

Всплывающая подсказка не удаляется при перемещении курсора.

Прилагаемый скриншот

Обновление, наконец, диаграмма работает нормально, одна проблема со смещением влево. он выходит за пределы диаграммы.

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

Ответ №1:

Проблема 1 — Выравнивание содержимого таблицы по центру

Выравнивание можно изменить с помощью следующего css:

 #tooltip td {
  text-align: left;
}

Проблема 2 — Всплывающая подсказка не удаляется при перемещении курсора

Я не могу воспроизвести эту проблему, поскольку функция использует только один div с идентификатором tooltip , который он не должен добавлять.

Ближе всего я могу подойти к этой проблеме, если у вас есть другая id , в этом случае chart.js будет создаваться новая всплывающая подсказка каждый раз, когда она пытается ее отобразить. Вот пример:

Поэтому убедитесь, что идентификатор тот же, и дайте мне знать, в чем проблема.

Проблема 3 — Положение всплывающей подсказки в конце холста

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

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

   var offset = tooltip.width   20;
  if (this._chart.width / 2 < tooltip.caretX) {
    offset *= -1;
  }

  // Hidden Code
  tooltipEl.style.left = positionX   tooltip.caretX   offset   'px';

Пример 2 — Всплывающая подсказка, ограниченная размером холста

   var offset = tooltip.caretX   20;
  if (offset < tooltip.width)
    offset = tooltip.width;
  else if (tooltip.caretX > this._chart.width - tooltip.width)
    offset = this._chart.width - tooltip.width;

  // Hidden Code
  tooltipEl.style.left = positionX   offset   'px';

Смотрите рабочий пример.

Решение исходной проблемы

Используя один из примеров, этот, можно изменить функцию, которая добавляет значения во всплывающую подсказку table , чтобы при каждом нечетном / четном значении она создавала tr .

Рабочий пример

Показать фрагмент кода

 var customTooltips = function(tooltip) {
  // Tooltip Element
  var tooltipEl = document.getElementById('tooltip');

  if (!tooltipEl) {
    tooltipEl = document.createElement('div');
    tooltipEl.id = 'tooltip';
    tooltipEl.innerHTML = '<table></table>';
    this._chart.canvas.parentNode.appendChild(tooltipEl);
  }

  // Hide if no tooltip
  if (tooltip.opacity === 0) {
    tooltipEl.style.opacity = 0;
    return;
  }

  // Set caret Position
  tooltipEl.classList.remove('above', 'below', 'no-transform');
  if (tooltip.yAlign) {
    tooltipEl.classList.add(tooltip.yAlign);
  } else {
    tooltipEl.classList.add('no-transform');
  }

  function getBody(bodyItem) {
    return bodyItem.lines;
  }

  // Set Text
  if (tooltip.body) {
    var titleLines = tooltip.title || [];
    var bodyLines = tooltip.body.map(getBody);

    var innerHtml = '<thead>';

    titleLines.forEach(function(title) {
      innerHtml  = '<tr><th>'   title   '</th></tr>';
    });
    innerHtml  = '</thead><tbody>';

    bodyLines.forEach(function(body, i) {
      var colors = tooltip.labelColors[i];
      var style = 'background:'   colors.backgroundColor;
      style  = '; border-color:'   colors.borderColor;
      style  = '; border-width: 2px';
      var span = '<span class="chartjs-tooltip-key" style="'   style   '"></span>';
      var innerContent = '<td>'   span   body   '</td>';
      // Every even/odd create a new tr
      if (i % 2 == 0)
        innerHtml  = '<tr>'   innerContent;
      else
        innerHtml  = innerContent   '</tr>';
    });
    // If is a odd number of itens close the last open tr
    if (bodyLines.count % 2 == 1)
      innerHtml  = '</tr></tbody>';
    else
      innerHtml  = '</tbody>';

    var tableRoot = tooltipEl.querySelector('table');
    tableRoot.innerHTML = innerHtml;
  }

  var positionY = this._chart.canvas.offsetTop;
  var positionX = this._chart.canvas.offsetLeft;
  
  var offset = tooltip.caretX   20;
  if (offset < tooltip.width)
    offset = tooltip.width;
  else if (tooltip.caretX > this._chart.width - tooltip.width)
    offset = this._chart.width - tooltip.width;
  
  // Display, position, and set styles for font
  tooltipEl.style.opacity = 1;
  tooltipEl.style.left = positionX   offset   'px';
  tooltipEl.style.top = positionY   tooltip.caretY   'px';
  tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
  tooltipEl.style.fontSize = tooltip.bodyFontSize   'px';
  tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
  tooltipEl.style.padding = tooltip.yPadding   'px '   tooltip.xPadding   'px';
};

var myChart = new Chart($('#myChart'), {
  type: 'line',
  data: {
    labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4'],
    datasets: [{
      label: 'Dats asd asda 1',
      data: [12, 19, 3, 5],
      pointRadius: 5,
      pointHoverRadius: 5,
      backgroundColor: 'rgba(255, 0, 0, 0.2)'
    }, {
      label: 'D 2',
      data: [13, 17, 4, 6],
      pointRadius: 5,
      pointHoverRadius: 5,
      backgroundColor: 'rgba(255, 255, 0, 0.2)'
    }, {
      label: 'D 3',
      data: [14, 19, 3, 9],
      pointRadius: 5,
      pointHoverRadius: 5,
      backgroundColor: 'rgba(0, 255, 0, 0.2)'
    }, {
      label: 'Data 4',
      data: [15, 20, 2, 8],
      pointRadius: 5,
      pointHoverRadius: 5,
      backgroundColor: 'rgba(0, 0, 255, 0.2)'
    }]
  },
  options: {
    responsive: false,
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          suggestedMax: 50,
        }
      }]
    },
    tooltips: {
      enabled: false,
      mode: 'index',
      intersect: false,
      custom: customTooltips
    }
  }
});

 #tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 4px;
}

#tooltip td {
  text-align: left;
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>

<canvas id="myChart" width="400" height="200"></canvas>

1. Я обновил свои проблемы, пожалуйста, проверьте в моем вопросе вверху.

2. Я действительно не знаю, почему всплывающие подсказки не удаляются при переходе в другую точку. проверяю это. я обновлю вас к завтрашнему дню.

3. Обновленный скриншот, пожалуйста, проверьте. я рад, что мы очень близки к закрытию этой проблемы.

4. @ManjunathSiddappa два вопроса, сначала, пожалуйста, посмотрите мой ответ еще раз и скажите мне, не работает ли решение проблемы, если да, то на странице больше одной диаграммы?

5. Теперь всплывающая подсказка работает нормально, одна проблема, последняя, я полагаю. Всплывающая подсказка становится узкой всякий раз, когда я перемещаю курсор к краю. дайте мне знать, если вы можете это исправить.?

Ответ №2:

Последняя функция была бы (надеюсь, кому-то это поможет в будущем).

 function buildChartOptions(xAxisLabel, yAxisLabel, pointStyle, position) {

    var options = {
        tooltips: {
            enabled: false,
            mode: 'index',
            intersect: false,
            multiKeyBackground: 'rgb(0,0,0)',
            bodyFontSize: 14,
            titleFontSize: 16,
            xPadding: 20,
            yPadding: 20,
            //Custom Tooltip Element
            custom: function(tooltip) {
                var tooltipEl = '';
                tooltipEl = document.getElementById('custom_tooltip');

                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'custom_tooltip';
                    tooltipEl.innerHTML = '<table></table>';
                    document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltip.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // Set caret Position
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltip.yAlign) {
                    tooltipEl.classList.add(tooltip.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }

                // Set Text
                if (tooltip.body) {
                    var titleLines = tooltip.title || [];
                    var bodyLines = tooltip.body.map(getBody);

                    var innerHtml = '<thead>';
                    var inHeadStyle = 'padding-bottom:10px;';
                    titleLines.forEach(function(title) {
                        innerHtml  = '<tr><th style="'   inHeadStyle   '">'   title   '</th></tr>';
                    });
                    innerHtml  = '</thead><tbody>';

                    bodyLines.forEach(function(body, i) {

                        var colors = tooltip.labelColors[i];
                        var colorType = "";

                        //If chart is Kagi plot, pick border color
                        if (pointStyle == 0) {
                            colorType = colors.borderColor;
                        } else { //if scatter plot pick background color
                            colorType = colors.backgroundColor;
                        }

                        var style = 'background:'   colorType;
                        style  = '; border-color:'   colors.borderColor;
                        style  = '; border-width: 2px';

                        var inStyle = 'text-align:left;';

                        var span = '<span class="chartjs-tooltip-key" style="'   style   '"></span>';

                        var innerContent = '<td>'   span   body   '</td>';

                        // Every even/odd create a new tr
                        if (i % 2 == 0) {
                            innerHtml  = '<tr style="'   inStyle   '"> '   innerContent;
                        } else {
                            innerHtml  = innerContent   '</tr>';
                        }
                    });

                    // If is a odd number of itens close the last open tr
                    if (bodyLines.count % 2 == 1) {
                        innerHtml  = '</tr></tbody>';
                    } else {
                        innerHtml  = '</tbody>';
                    }

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }

                var position = this._chart.canvas.getBoundingClientRect();
                // Display, position, and set styles for font               
                tooltipEl.style.opacity = 1;
                tooltipEl.style.position = 'absolute';
                tooltipEl.style.left = position.left   window.pageXOffset   tooltip.caretX   'px';
                tooltipEl.style.top = position.top   window.pageYOffset   tooltip.caretY   'px';
                tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
                tooltipEl.style.fontSize = tooltip.bodyFontSize   'px';
                tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
                tooltipEl.style.padding = tooltip.yPadding   'px '   tooltip.xPadding   'px';
                tooltipEl.style.pointerEvents = 'none';
            },
            callbacks: {
                label: function(tooltipItems, data) {
                    var prefix = data.datasets[tooltipItems.datasetIndex].label;
                    return prefix   " : "   tooltipItems.yLabel;
                },
                title: function(tooltipItems, data) {
                    var value = tooltipItems[0].xLabel;
                    return xAxisLabel   " : "   value;
                }
            }
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: xAxisLabel
                },
                ticks: {
                    maxRotation: 90,
                    minRotation: 90,
                    beginAtZero: true,
                    suggestedMin: 0,
                    autoSkip: false
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: yAxisLabel
                },
                ticks: {
                    beginAtZero: true,
                    suggestedMin: 0
                }
            }]
        },
        responsive: true,
        maintainAspectRatio: false,
        spanGaps: true,
        legend: {
            display: true,
            position: position,
            labels: {
                fontSize: 13,
                padding: 10
            }
        },
        elements: {
            point: {
                pointStyle: pointStyle
            }
        }
    }

    return options;
}