nnnick chart.js - 折線圖上的自定義工具提示

Question

我們在我們的應用程序中使用nnnick chart.js（開放源代碼圖表）報告目的。需要在折線圖中顯示自定義工具提示。

截至目前，基於X軸和Y軸數據集值顯示Normal圖表工具提示。但是，我們想在工具提示中顯示動態附加數據。 例如， 讓我們拿一個學生註冊。 這裏 X軸值 - 報名月份（一月，二月，三月....等） Y軸值 - 招生數（10,20,30 ... ECT）

折線圖後被繪製，現在它在工具提示中顯示（Jan，10）。 我們必須顯示男性人數&工具提示中的女學生詳細信息鼠標懸停在數據點Jan 10（即）（1月10日，男性：5，女性5）。

如果你看到上面的屏幕截圖，綠顏色是•託普尖是正常的其中之一是內置選項。紅色突出顯示的工具提示是我們所期待的。

請提供任何建議。

Answer 1

所以，你可以使用較新的自定義工具提示功能實現這個（不知道，當它被包括在內）圖表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>