• Home
  • railsでjsではなくrubyでtooltipの単位を設定するときの話

railsでjsではなくrubyでtooltipの単位を設定するときの話

記事のサムネイル

個人開発を行なっていた際にrailsのgemであるchartjs-rorをつかって、chart.jsでドーナツグラフを表示させていました。

その中で、グラフの項目をホバーした際にツールチップを表示させていたのですが、「単位もあった方がわかりやすいよな」と考えたのが事の発端でした。

rubyでtooltipの単位を定義する方法を見つけるまで

自分が個人開発していたプロジェクトはgemのchartjs-rorを利用していた関係で、chart.jsのデータもoptionも全てrubyで定義していました。

最初は、「検索したら方法なんていっぱい出てくるだろ」と思っていたのですが、調べど調べど全然したい事が再現できる情報が出てきませんでした。

そこで、以下の方法を使って解決しようとしました。

  1. chatGPTに聞く
  2. 過去個人開発したコードを漁る

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で教えていただけると嬉しいです!

実装やエラーが解決できない場合

プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。

考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。

そういう時は聞ける先輩や、メンターに相談することが大事です。

僕にも相談可能なので気軽に相談してください。

ご相談はこちら
(Twitterのプロフィールへ飛びます)

OTHER ARTICLES

  • Web制作

  • Rails

railsでjsではなくrubyでtooltipの単位を設定するときの話

2024/08/20
  • Web制作

  • Rails

Railsにおけるクラスメソッドとインスタンスメソッドの違いについて

2024/05/30
  • Web制作

  • Docker

  • Rails

DockerでRails7 + PostgreSQL + esbuildの環境を構築する方法

2024/05/16
  • Web制作

  • Rails

  • Docker

Dockerで建てたrails7環境で「undefined method `devise' for 〜」が発生した話

2024/05/16
  • Web制作

  • Rails

Ruby on RailsのルーティングとRESTfulルート

2024/05/09
  • Web制作

  • Rails

Ruby on Railsにおけるresourceとresourcesの違い

2024/05/01
管理者のイメージ画像

PROFILE

Youta

山口県出身の現役のWebエンジニアです。仕事を通して学んだことや、生活していく中で学んだことを発信していきます。

CATEGORY