ChartJS v2定製工具提示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.'; 
        } 
       } 
      } 
     } 
    });