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.'; 
        } 
       } 
      } 
     } 
    });