Chart.jsバブルチャートデータセットラベルを変更する

Question

バブルチャートのチャートチャートのツールチップに表示されるデータセットラベルを変更することはできますか？

それが今の現状では、データセットはx,y,r値をオフに基づいているが、私が代わりに(5,55,27.5)を読んで、それはのようなもの読み取るように、いくつかの追加コンテンツを挿入したい：(Day:5, Total:55)を。私はツールチップに27.5の半径を残したいと思います。

Answer 1

はい！可能です。

それを達成するには、次のtooltip­'s label callback機能を使用することができます。

tooltips: { 
    callbacks: { 
     label: function(t, d) { 
     return d.datasets[t.datasetIndex].label + 
       ': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')'; 
     } 
    } 
} 

---

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

var chart = new Chart(ctx, { 
 
    type: 'bubble', 
 
    data: { 
 
     datasets: [{ 
 
     label: 'Bubble', 
 
     data: [{ 
 
      x: 5, 
 
      y: 55, 
 
      r: 27.5 
 
     }], 
 
     backgroundColor: 'rgba(0, 119, 290, 0.6)' 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
     callbacks: { 
 
      label: function(t, d) { 
 
       return d.datasets[t.datasetIndex].label + 
 
         ': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')'; 
 
      } 
 
     } 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="ctx"></canvas>