[英]Chart JS custom tooltip not showing
I have a line graph and I want to alter it's tooltip.我有一个折线图,我想改变它的工具提示。 I want it, on hover, to show the follow (as an example):我希望它在悬停时显示以下内容(例如):
Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7
The data in the tooltip is fine and works.工具提示中的数据很好并且有效。 See this fiddle here在这里看到这个小提琴
What I'm trying to do is to add to the tooltip so that it can display the question in it too.我想要做的是添加到工具提示中,以便它也可以在其中显示问题。
What I've tried:我试过的:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset=data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
}
}
}
var q1 = "This is question 1"; var q2 = "This is question 2"; var q3 = "This is question 3"; var q4 = "This is question 4"; var q5 = "This is question 5"; var questions = [q1, q2, q3, q4, q5]; var questionsArrayLength = questions.length; for (var i = 0; i < questionsArrayLength; i++) { console.log(questions[i]); } var canvas = document.getElementById('chart'); canvas.height = 500; var data = { labels: ["Q1", "Q2", "Q3", "Q4", "Q5"], datasets: [{ label: "Your answers", 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: "rgba(75,192,192,1)", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 5, decimals: false, pointHitRadius: 10, data: [1,3,4,5,3], stack: 4 }, { label: "Average answers", fill: false, lineTension: 0.1, borderColor: "rgba(79,104,241,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "rgba(79,104,241,1)", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(79,104,241,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 5, decimals: false, pointHitRadius: 10, data: [2, 7, 5, 10, 3], stack: 5 }, { label: "Your average", pointStyle: 'line', fill: false, borderColor: "#ffffff", borderCapStyle: 'round', borderDash: [0.5, 5], borderDashOffset: 1, lineTension: 0.1, data: [5, 5, 5, 5, 5], }, { label: "Average", pointStyle: 'line', fill: false, borderColor: "#ffffff", borderCapStyle: 'round', borderDash: [5, 8], borderDashOffset: 0.6, lineTension: 0.1, data: [7, 7, 7, 7, 7], }, ] }; var options = { tooltips: { callbacks: { label: function(tooltipItem, data) { var dataset=data.datasets[tooltipItem.datasetIndex]; return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i]; } } }, plugins: { filler: { propagate: true } }, responsive: true, maintainAspectRatio: false, tooltips: { mode: 'index' }, showLines: true, scales: { yAxes: [{ gridLines: { color: 'rgb(255, 255, 255)', z: 2 }, scaleLabel: { display: true, labelString: 'Scores' }, stacked: false, ticks: { beginAtZero: 0, suggestedMin: 1, suggestedMax: 10, stepSize: 2, userCallback: function(label, index, labels) { // when the floored value is the same as the value we have a whole number if (Math.floor(label) === label) { return label; } }, } }], xAxes: [{ gridLines: { color: 'rgb(255, 255, 255)', z: 2 }, scaleLabel: { display: true, labelString: 'Questions' }, }] }, annotation: { annotations: [ { drawTime: "beforeDatasetsDraw", type: "box", id: "n", xScaleID: "x-axis-0", yScaleID: "y-axis-0", xMin: "Q1", xMax: "Q5", yMin: 0, yMax: 3.7, backgroundColor: "rgba(26,26,26,0.6)", borderColor: "rgba(26,26,26,0.6)", borderWidth: 1, }, { drawTime: "beforeDatasetsDraw", type: "box", xScaleID: "x-axis-0", yScaleID: "y-axis-0", xMin: "Q1", xMax: "Q5", yMin: 3.7, yMax: 7, backgroundColor: 'rgba(88,88,88,0.6)', borderColor: 'rgba(88,88,88,0.6)', borderWidth: 1, }, { drawTime: "beforeDatasetsDraw", type: "box", xScaleID: "x-axis-0", yScaleID: "y-axis-0", xMin: "Q1", xMax: "Q5", yMin: 7, yMax: 10, backgroundColor: 'rgba(31,42,97,0.6)', borderColor: 'rgba(88,88,88,0.6)', borderWidth: 0 } ] } }; var myLineChart = Chart.Line(document.getElementById('chart'), { data: data, options: options });
.wrap { background-color:#000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script> <div class="wrap"> <canvas id="chart"></canvas> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.