ChartJS v2 rLabelのカスタムツールチップ

Question

x、y、r（バブルの半径）の3つの次元を持つChartJS（v2）バブルチャートがあります。

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値はツールチップアイテムのプロパティではないため、未定義です。私はデータオブジェクトからその値にアクセスします。

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