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

Question

我们在申请中使用nnnick chart.js（开源图表）进行报告。需要在折线图中显示自定义工具提示。

截至目前，正常图表工具提示基于X轴和Y轴数据集值显示。但是，我们要在工具提示中显示动态附加数据。 例如 ， 让我们参加学生入学。  这里 X轴价值 - 报名月（1月，2月，3月......等） Y轴值 - 入学人数（10,20,30 ...等）

绘制折线图后，现在它在工具提示中显示（1月10日）。 我们必须显示男性和女性的数量。工具提示中的女学生详细信息鼠标悬停在数据点1月10日（即）（1月10日，男性：5，女性5）。

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

请就此提出任何建议。

Answer 1

所以你可以使用更新的自定义工具提示功能（不确定它何时被包含）来实现这一点。您可以让它显示您想要的任何内容，而不是正常的工具提示，因此在这种情况下，我添加了工具提示和工具提示概述。

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

所以这是一个基于chartjs samples文件夹中的示例的快速示例。这只是一个简单的例子，所以你很可能需要玩定位和东西直到你需要的东西。

＆＃13;

＆＃13;

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
});

＆＃13;

 #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;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;