Vuetify

ショップ

企業向け

スパークラインコンポーネントを使用して、GitHubの貢献度チャートのようなグラフを作成できます。

以下にリストされているものに加えて、SVG属性 を使用できます。

スパークラインは、データを視覚的に表現する小さなグラフです。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

fillプロパティを使用すると、塗りつぶし付きのv-sparklineを作成できます。

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

v-sparkline コンポーネントは、v-cardおよびv-sheetとうまく組み合わせて、カスタマイズされた情報カードを作成し、管理用ダッシュボードを構築するのに最適です。ここでは、カスタムラベルを使用して、スパークラインに追加のコンテキストを提供します。

label スロットを提供することにより、ドル記号($)を追加して表示コンテンツを変更できます。このスロットは、テキストコンテンツの場合は exclusively (排他的)です。 svg <text>要素の詳細については、ここにナビゲート

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!