nnnickchart.js-折线图上的自定义工具提示-nnnickchart.js-CustomTooltiponLineChart

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 = "
 Overall : " + (maleEnrolmentNumber + femaleEnrolmentNumber) + "
";
  tooltipOverviewElHtml += "
 Male : " + (maleEnrolmentNumber) + "
";
  tooltipOverviewElHtml += "
 Female : " + (femaleEnrolmentNumber) + "
";

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