javascript - 需要帮助来确定自定义工具提示的配置(chartjs)

Question

我是 Chartjs 的完全初学者，很难从官方文档中找出用于设计自定义工具提示(折线图)的配置，如下所示:

当前配置和图像:

const data = {
  labels: labelsArray,
  datasets: [
    {
      fill: false,
      lineTension: 0,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: '#006fc9',
      borderWidth: 1,
      borderCapStyle: 'round',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(0, 111, 201, 0.23)',
      pointHoverBorderColor: 'rgba(0, 109, 197, 0.45)',
      pointHoverBorderWidth: 1,
      pointRadius: 0,
      pointHitRadius: 10,
      data: leadsArr,
    }
  ]
};

const options = {
  maintainAspectRatio: false,
  responsive: true,
  legend: {
    display: false
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false
      },
      scaleLabel: {
        display: true,
        labelString: 'Time'
      }
    }],
    yAxes: [{
      ticks: {
        stepSize: 20,
        beginAtZero: true
      },
      gridLines: {
        drawBorder: false
      },
      scaleLabel: {
        display: true,
        labelString: 'Leads',
      }
    }]
  },
  tooltips: {
    mode: 'index',
    backgroundColor: 'rgba(255,255,255)',
    borderColor: 'rgb(0, 0, 0)',
    borderWidth: 0.3,
    cornerRadius: 0,
    caretSize: 0,
    xPadding: 70,
    yPadding: 25,
    titleFontColor: 'rgba(0, 0, 0, 0.87)',
    titleFontSize: 10,
    titleFontFamily: 'Roboto',
    bodyFontFamily: 'Roboto',

  }
};

我尝试使用配置，但仍然无法实现图像中的工具提示。

P.S:我只是寻求解决问题的建议/最佳方法，除此之外别无其他。

Answer 1

Chart.js 可以选择定义 custom tooltip .

您可以为要显示的值定义一个带有占位符的 html 元素，并在自定义工具提示函数中设置这些值。以下是如何完成此操作的片段。

        var canvas = document.getElementById('myChart');
    
        var data = {
            data: [65, 59, 80, 0, 56, 55, 40],
            rate: [9, 20, 15, 40, 33, 20, 15],
            meetings: [1, 2, 3, 4, 4, 2, 1],
            mails: [1000, 2000, 2500, 3000, 2500, 1500, 2500]
        }

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

            // 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');
            }
            
            if (tooltip.dataPoints.length) {
                var ind = tooltip.dataPoints[0].index;
                $("#spn-leads").text(data.data[ind]);
                $("#spn-meetings").text(data.meetings[ind]);
                $("#spn-mails").text(data.mails[ind]);
                $("#spn-rate").text(data.rate[ind]);
            }

            var positionY = this._chart.canvas.offsetTop;
            var positionX = this._chart.canvas.offsetLeft;

            // Display, position, and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.left = positionX + tooltip.caretX + 'px';
            tooltipEl.style.top = positionY + tooltip.caretY + 'px';
            tooltipEl.style.fontFamily = tooltip._fontFamily;
            tooltipEl.style.fontSize = tooltip.fontSize;
            tooltipEl.style.fontStyle = tooltip._fontStyle;
            tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
        };

        var lineData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 5,
                    pointHitRadius: 10,
                    data: data.data
                }
            ]
        };


        var option = {
            title: {
                display: true,
                text: 'Chart.js - Custom Tooltips'
            },
            tooltips: {
                enabled: false,
                mode: 'index',
                position: 'nearest',
                custom: customTooltips
            }
        };
        var myLineChart = Chart.Line(canvas, {
            data: lineData,
            options: option
        });

 canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    #chartjs-tooltip {
        opacity: 1;
        position: absolute;
        background: white;
        color: black;
        border: 1px solid black;
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        pointer-events: none;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        min-width: 200px;
    }

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div id="chartjs-tooltip" class="center bottom">
    <p><i>29th Sep 2016</i></p>
    <div style="float: left;">
        <span>No of leads: <span style="color: blue" id="spn-leads"></span></span><br />
        <span>No of meetings: <span style="color: blue" id="spn-meetings"></span></span><br />
        <span>Mails sent: <span style="color: blue" id="spn-mails"></span></span>
    </div>
    <div style="float: left; margin-left: 30px; text-align: center;">
        <span style="color: red" id="spn-rate"></span><br />
        <span>Success</span><br />
        <span>Rate</span>
    </div>
</div>

关于如何在 chartjs website 上实现自定义工具提示，还有一个很好的示例.