0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuetify Sparklinesに垂直ラベル、基準線がない件

Last updated at Posted at 2020-08-05

Vuetifyで用意されている線グラフのコンポーネントSpark lines
https://vuetifyjs.com/ja/components/sparklines/

見た目も綺麗でぜひ利用したいと思い
プレイグラウンドで色々いじってみて気づいたのが、

各データポイントの下にラベルを表示するのは
show-labelstrueにすることでできるが
####垂直ラベルを表示する機能がついていない

ということ。

スパークラインのVuetifyのスタンスとしては
あまり細かくデータを見せる気は無いようで、
https://vuetifyjs.com/ja/components/sparklines/#%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E4%BC%91%E6%86%A9

簡潔な情報を得るために、完全なチャートはやり過ぎかもしれません。グラデーションをいれたトレンドラインを使用すると、あまり多くの情報を表示することなく、ユーザーに十分な詳細を提供できます。

色のグラデで基準線を表現してるんですね。

基準線と垂直ラベルの
切実なリクエストはあるようですが、改めて対応予定を否定していました。
https://github.com/vuetifyjs/vuetify/issues/6173

あくまでSparklinesは動向をなんとなく見せるような感じで
例えばInstagramのアクティビティのような…
E0725ADD-B697-4DB5-BF72-D9BE8EA60BD4.jpeg
(基準線がない/垂直ラベルがなく水平方向のラベルのみ)
この程度の情報量だけで簡潔に伝える場合に使うものと考えた方が良さそうです。

結果、今回はより詳細な情報として線グラフの情報を出したいため、
Chartjsなどを使用することにしました。
https://www.chartjs.org/

参考になれば幸いです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?