Блог

Я отображаю смешанную столбчатую и линейную диаграмму с помощью chartjs. Мне успешно удалось отобразить другое содержимое во всплывающей подсказке при наведении курсора мыши на линейный график или столбцы, но использование того же условия не работает для отображения другого заголовка:

 callbacks: {
  title: function(tooltipItem, data) {                      
     if (tooltipItem.datasetIndex === 0){
       return data['datasets'][0]['label'];
     }else{
       return data['datasets'][1]['label'];  
     }
   }
}
 

Я использую значения PHP для заполнения данных в основной диаграмме. Вот код для основной диаграммы:

 var ctx_<?=$chartname?> = document.getElementById('<?=$chartname?>').getContext('2d');
new Chart(ctx_<?=$chartname?>, {
    type: 'bar',
    data: {
        labels: [<?=$labels?>], //label array needs to go here
        datasets: [{
                label: 'Overall Average Score',
                notes: ['','','','',''],
                data: [<?=$averages?>],
                pointBackgroundColor: '#6600CC',
                pointRadius: 6,
                pointBorderColor: 'rgb(255, 255, 255)',    
                pointHoverRadius:8,
                pointHoverBorderWidth: 2,
                pointHoverBorderColor: 'rgb(255, 255, 255)', 
                fill: false,
                
                // Changes this dataset to become a line
                type: 'line'
            },{
                label: '<?=$forename?>'s Score',
                notes: [<?=$notes?>],
                data: [<?=$scores?>] //data array needs to go in here
            }],
    },
    options: groupBarChartOptions
});
 

Однако вместо заполнения заголовка всплывающей подсказки как «Общий средний балл» он заполняет заголовок всплывающей подсказки линейного графика «Оценка имени ученика»

Я использую тот же

 if (tooltipItem.datasetIndex === 0){
 

условие в следующем обратном вызове метки, и оно работает.

Это должно работать для того, что вы хотите:

 title: (tooltipItem, data) => {
    return data['datasets'][tooltipItem[0].datasetIndex]['label']
}
 

рабочий пример: https://jsfiddle.net/Leelenaleee/bcwky40z/4 /