個人開発を行なっていた際にrailsのgemであるchartjs-rorをつかって、chart.jsでドーナツグラフを表示させていました。
その中で、グラフの項目をホバーした際にツールチップを表示させていたのですが、「単位もあった方がわかりやすいよな」と考えたのが事の発端でした。
rubyでtooltipの単位を定義する方法を見つけるまで
自分が個人開発していたプロジェクトはgemのchartjs-rorを利用していた関係で、chart.jsのデータもoptionも全てrubyで定義していました。
最初は、「検索したら方法なんていっぱい出てくるだろ」と思っていたのですが、調べど調べど全然したい事が再現できる情報が出てきませんでした。
そこで、以下の方法を使って解決しようとしました。
- chatGPTに聞く
- 過去個人開発したコードを漁る
1.chatGPTに聞く
こちらの方法は全くもって意味を成しませんでした。
私の聞き方が悪かったのかもしれませんが、返ってくるのはほとんどjsでのoptionの指定方法でした...
2.過去個人開発したコードを漁る
こちらの方法で見つけました。
過去に同じようにrailsでchartjs-rorを利用して、chart.jsのデータもoptionも全てrubyで定義しているプロジェクトの中に下記のようなコードがありました。
ticks: {
...
callback: "function(value) {if (value % 1 === 0) {return value;}}",
...
},
このコードを流用する形で下記のように記載して、無事にruby(jsでコードが書いてありますが、そこはお許しを...)の記述で解決することができました。
options = {
plugins: {
legend: {
display: false,
},
title: {
display: false,
},
datalabels: {
display: false,
},
tooltip: {
enabled: true,
callbacks: {
label: "function(context) {let label = context.label || '';if (label) {label += ': ';}if (context.raw !== null) {label += context.raw + '%';}return label;}",
},
},
},
responsive: true,
aspectRatio: 1,
}
この他に、もっと簡単に表示できるのに...という方法をご存知の方がいらっしゃれば、X(旧Twitter)等のDMで教えていただけると嬉しいです!