图表 JS 自定义工具提示未显示

Question

我有一个折线图，我想改变它的工具提示。 我希望它在悬停时显示以下内容（例如）：

Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7

工具提示中的数据很好并且有效。 在这里看到这个小提琴

我想要做的是添加到工具提示中，以便它也可以在其中显示问题。

我试过的：

 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>

Answer 1

您必须定义一个回调函数来更改工具提示标题，如下所示。

tooltips: {
    mode: 'index',
    callbacks: {
       title: tooltipItem => 'Question: ' + questions[tooltipItem[0].index]
    }
}

请检查修改后的JSFiddle