Chart JS自定义工具提示未显示

Question

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

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

工具提示中的数据可以正常工作。 See this fiddle here

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

我尝试过的：

 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

您必须定义callback函数来按如下所示更改工具提示标题。

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

请检查修改后的JSFiddle