中心文字下方的甜甜圈图工具提示

Question

我正在使用Chart.js v2.4.0，并且一直在使用甜甜圈图。由于项目的要求，我必须在甜甜圈的中心显示数据。当我将鼠标悬停在甜甜圈图上时，将显示工具提示，该提示位于中心标签下方。

上面的屏幕快照显示了我面临的问题。

没有工具提示的甜甜圈图就像上面的屏幕截图。

Answer 1

我的情况与您类似，因此这是我的代码，您可以根据需要进行更改。基本结构完全起作用。这里的示例-https://codepen.io/BiDbMAK/pen/zmKZyY

(function ($, window, document, undefined) {
  'use strict';
  function sumOfDataVal(dataArray) {
        return dataArray['datasets'][0]['data'].reduce(function (sum, value) {
            return sum + value;
        }, 0);
    }

    var dataResponse = {
        datasets: [{
            data: [10, 20, 30, 55, 75],
            backgroundColor: [
                '#2b92d8',
                '#2ab96a',
                '#e9c061',
                '#d95d6b',
                '#9173d8'
            ],
            borderColor: '#25272f',
            borderWidth: 3,
            hoverBackgroundColor: [
                '#2b92d8',
                '#2ab96a',
                '#e9c061',
                '#d95d6b',
                '#9173d8'
            ],
            hoverBorderColor: '#25272f',
            hoverBorderWidth: 3
        }],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        labels: [
            'Blue',
            'Green',
            'Yellow',
            'Red',
            'Violet'
        ]
    };


    Chart.defaults.global.tooltips.custom = function (tooltip) {
        // Tooltip Element


        var tooltipEl = document.getElementById('chartjs-tooltip');

        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.color = "#464950";
            $("#chartjs-tooltip div p").text("100%");

            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 bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<p>';
            bodyLines.forEach(function (body, i) {
                var dataNumber = body[i].split(":");
                var dataValNum = parseInt(dataNumber[1].trim());
                var dataToPercent = (dataValNum / sumOfDataVal(dataResponse) * 100).toFixed(2) + '%';
                innerHtml += dataToPercent;
            });

            innerHtml += '</p>';

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


        tooltipEl.style.opacity = 1;
        tooltipEl.style.color = "#FFF";
    };


    var ctx = document.getElementById('myChart').getContext('2d');
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: dataResponse,
        options: {
            legend: {
                display: false
            },
            cutoutPercentage: 73,
            circumference: 2 * Math.PI,
            maintainAspectRatio: false,
            animation: {
                animateRotate: false,
                animateScale: true
            },
            tooltips: {
                enabled: false
            }
        }
    });
})(jQuery, window, document);

body {
  background: #25272f;
}
body .chart-wrapper {
  max-height: 250px;
  position: relative;
  margin-top: 50px;
}
body .chart-wrapper #myChart {
  position: relative;
  z-index: 10;
}
body .chart-wrapper #chartjs-tooltip {
  left: 0;
  top: 0;
  font-family: Arial, sans-serif;
  font-style: normal;
  right: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  z-index: 0;
  height: 100%;
  padding: 0;
  opacity: 1 !important;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: gray;
  font-size: 40px !important;
  font-weight: 800 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="chart-wrapper">
    <canvas id="myChart" width="250" height="250"></canvas>   <div id="chartjs-tooltip">
      <div><p>100%</p></div>
    </div>
  </div>
 </body>