nnnick chart.js - 折线图上的自定义工具提示

Question

我们在报告应用程序中使用 nnnick chart.js（开源图表）purpose.There 需要在折线图中显示自定义工具提示。

截至目前，普通图表工具提示基于 X 轴和 Y 轴数据集值显示。但是这里我们想在工具提示中显示动态附加数据。例如，让我们以 Student Enrollment 为例。这里 X 轴值 - 入学月份（一月、二月、三月等） Y 轴值 - 注册人数（10、20、30...等）

折线图绘制完成后，工具提示中显示(Jan ,10)。我们必须在工具提示中显示男性和女性学生的详细信息将鼠标悬停在数据点 Jan 10 上（即）（Jan,10, Male:5 , Female 5）。

如果你看到上面的截图，绿色是top-tip是正常的，是一个内置选项。红色突出显示的工具提示是我们所期待的。

请对此提出任何建议。

Answer 1

因此您可以在较新的（不确定何时包含）chart js 中使用自定义工具提示功能来实现此目的。你可以让它显示任何你想要的东西来代替普通的工具提示，所以在这种情况下我添加了一个工具提示和一个工具提示概览。

真正烦人的是虽然在这个函数中你没有被告知你当前显示的是哪个索引的工具提示。解决这个问题的两种方法，重写 showToolTip 函数以便它实际传递此信息，或者做一个快速的小黑客从工具提示文本中提取标签并从标签数组中获取索引（hacky 但更快所以我在示例）

这里是一个基于 chartjs 示例文件夹中的示例的快速示例。这只是一个简单的示例，因此您可能需要尝试定位和其他东西，直到它满足您的需要。

Chart.defaults.global.pointHitDetectionRadius = 1;
Chart.defaults.global.customTooltips = function(tooltip) {
    // Tooltip Element
  var tooltipEl = $('#chartjs-tooltip');
  var tooltipOverviewEl = $('#chartjs-tooltip-overview');
  // Hide if no tooltip
  if (!tooltip) {
    tooltipEl.css({
      opacity: 0
    });
    tooltipOverviewEl.css({
      opacity: 0
    });
    return;
  }

  //really annoyingly we don;t get told which index this comes from so going to have
  //to extract the label from the text :( and then find the index based on that
  //other option here is to override the the whole showTooltip in chartjs and have the index passed
  var label = tooltip.text.substr(0, tooltip.text.indexOf(':'));
  var labelIndex = labels.indexOf(label);
  var maleEnrolmentNumber = maleEnrolments[labelIndex];
  var femaleEnrolmentNumber = FemaleEnrolments[labelIndex];
  // Set caret Position
  tooltipEl.removeClass('above below');
  tooltipEl.addClass(tooltip.yAlign);
  // Set Text
  tooltipEl.html(tooltip.text);
  //quick an ddirty could use an actualy template here
  var tooltipOverviewElHtml = "<div> Overall : " + (maleEnrolmentNumber + femaleEnrolmentNumber) + "</div>";
  tooltipOverviewElHtml += "<div> Male : " + (maleEnrolmentNumber) + "</div>";
  tooltipOverviewElHtml += "<div> Female : " + (femaleEnrolmentNumber) + "</div>";

  tooltipOverviewEl.html(tooltipOverviewElHtml);
  // Find Y Location on page
  var top;
  if (tooltip.yAlign == 'above') {
    top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
  } else {
    top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
  }
  // Display, position, and set styles for font
  tooltipEl.css({
    opacity: 1,
    left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
    top: tooltip.chart.canvas.offsetTop + top + 'px',
    fontFamily: tooltip.fontFamily,
    fontSize: tooltip.fontSize,
    fontStyle: tooltip.fontStyle,
  });

  tooltipOverviewEl.css({
    opacity: 1,
    fontFamily: tooltip.fontFamily,
    fontSize: tooltip.fontSize,
    fontStyle: tooltip.fontStyle,
  });
};
var maleEnrolments = [5, 20, 15, 20, 20, 30, 50]; // Integer array for male each value is corresponding to each month

var FemaleEnrolments = [5, 0, 15, 20, 30, 30, 20]; // Integer array for Female each value is corresponding to each month

var labels = ["Jan", "February", "March", "April", "May", "June", "July"]; //Enrollment by Month
var lineChartData = {
  labels: labels,
  datasets: [{
    label: "Student Details",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [10, 20, 30, 40, 50, 60, 70], //enrollement Details overall (Male + Female)
  }]
};
var ctx2 = document.getElementById("chart2").getContext("2d");
window.myLine = new Chart(ctx2).Line(lineChartData, {
  responsive: true
});

 #canvas-holder1 {
     width: 300px;
     margin: 20px auto;
 }
 #canvas-holder2 {
     width: 50%;
     margin: 20px 25%;
    position:relative;
 }
 #chartjs-tooltip-overview {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
     left:200px;
     top:0px
 }
 #chartjs-tooltip {
     opacity: 1;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }
 .chartjs-tooltip-key {
     display:inline-block;
     width:10px;
     height:10px;
 }

<script src="https://raw.githack.com/nnnick/Chart.js/master/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder2">
  <div id="chartjs-tooltip-overview"></div>
  <div id="chartjs-tooltip"></div>
  <canvas id="chart2" width="600" height="600" />
</div>

nnnick chart.js - 折线图上的自定义工具提示

nnnick chart.js - Custom Tooltip on Line Chart

chart.js