ChartJS v2 custom tooltip for rLabel

Question

У меня есть диаграмма ChartJS (v2) с тремя измерениями: x, y и r (радиус пузыря).

После this answer, у меня есть этот код для настройки подсказки:

tooltips: { 
    callbacks: { 
    label: function (tooltipItem, data) { 
     var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || ''; 
     return datasetLabel + ' : ' + tooltipItem.rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.'; 
    } 
    } 
} 

Это почти работает за исключением того, что tooltipItem.rLabel отображается как undefined. Если я нахожу tooltipItem.xLabel, подсказка отображается правильно со значением x. Однако, я хочу показать значение r.

Кто-нибудь знает, как это можно решить?

Answer 1

значение rLabel не является собственностью tooltipItem, поэтому он дает неопределен. Я получаю это значение от данных.

tooltips: { 
       callbacks: { 
        label: function(tooltipItem, data) { 
         rLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r; 
         var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || ''; 
         return datasetLabel + ' : ' + rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.'; 
        } 
       } 
      } 

Ниже приведен рабочий код для него.

var data = { 
     datasets: [ 
      { 
       label: 'First Dataset', 
       data: [ 
        { 
         x: 20, 
         y: 30, 
         r: 15 
        }, 
        { 
         x: 40, 
         y: 10, 
         r: 10 
        } 
       ], 
       backgroundColor:"#FF6384", 
       hoverBackgroundColor: "#FF6384", 
      } 
     ] 
    }; 
    var myBubbleChart = new Chart(ctx,{ 
     type: 'bubble', 
     data: data, 
     options: { 
      tooltips: { 
       callbacks: { 
        label: function(tooltipItem, data) { 
         rLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r; 
         var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || ''; 
         return datasetLabel + ' : ' + rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.'; 
        } 
       } 
      } 
     } 
    });