RoughViz を使用して Vue.js でスケッチされたチャートを視覚化する方法

RoughViz を使用して Vue.js でスケッチされたチャートを視覚化する方法

導入

チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグラフィカルな表現です。ほとんどのユーザーは、すっきりとした正式な図を見ることに慣れていますが、手描きまたはスケッチされた図を好むユーザーもいます。そこで、roughViz が役立ちます。

roughViz は、D3.js と Rough.js をベースにした JavaScript ライブラリです。このライブラリは、以下の例のように、スケッチや手描きの図のような図を作成できるように設計されています。

このガイドでは、vue-roughviz を使用して Vue.js アプリケーションでスケッチのような図を表示する方法と、vue-cli を使用して Vue アプリケーションを構成する方法を学習します。

前提条件

このチュートリアルでは、次の前提条件が満たされていることを前提としています。

  • Vue.js の基本的な理解
  • Node.js のローカル開発環境と Node パッケージ マネージャー (npm) の知識
  • Visual Studio CodeやAtomなどのテキストエディタ

始める

vue-cli がまだインストールされていない場合は、次のコマンドを実行して最新バージョンをインストールしてください。

npm インストール -g @vue/cli
# または
糸グローバル追加 @vue/cli

次に、新しい vue アプリケーションを作成します。

vue で my-app を作成する

注意: このプロセスには数分かかる場合があります。それが完了したら、新しいアプリケーションのルート ディレクトリに移動できます。

cd my-app

上記で詳しく説明したプロセスにより、新しい Vue.js アプリケーションが作成されます。すべてがセットアップされていることを確認するには、 npm run serve を実行します。 http://localhost:8080 にアクセスすると、ブラウザに「Welcome to Your Vue.js app page」と表示されます。

vue-roughviz を追加

vue-roughviz は、RoughViz.js 用の Vue.js ラッパーです。これにより、ライブラリをコンポーネントとしてアクセスできるようになり、Vue.js ベースのプロジェクトでシームレスに再利用できるようになります。

プロジェクトに vue-roughviz を含めるには、次のコマンドを実行します。

npm インストール vue-roughviz

vue-roughViz コンポーネント

vue-roughviz は、以下を含むすべての rawViz チャート スタイル コンポーネントを提供します。

  • roughBar——rawViz 棒グラフ コンポーネント
  • roughBarH——roughViz 水平棒グラフ コンポーネント
  • roughDonut——roughViz ドーナツ チャート コンポーネント
  • roughPie——roughViz 円グラフ
  • roughLine——roughViz 折れ線グラフ コンポーネント
  • roughScatter——roughViz 散布図コンポーネント
  • roughStackedBar——roughViz 積み上げ棒グラフ コンポーネント

使用

プロジェクトに vue-roughviz を追加したら、次のステップは、好みのテキスト エディターでプロジェクト フォルダーを開くことです。

src/App.vue ファイルを開くと、初期コンテンツは次のようになります。

ビューが上記のようになっている場合は、その内容をすべて削除し、次のコードに置き換えてください。

<テンプレート>
 
 <div id="アプリ">
  
 <ラフバー:data="{
    ラベル: ['北', '南', '東', '西'],
    値: [10, 5, 8, 3],
   }" title="領域" roughness="8" :colors="['red', 'orange', 'blue', 'skyblue']"stroke="black"stroke-width="3" fill-style="cross-hatch" fill-weight="3.5" />
 
 </div>

</テンプレート>

コードの説明

  • import ... — このコード行は、先ほどインストールした vue-roughviz から rawBar コンポーネントをインポートします。
  • export default {} — このブロックは、以前にインポートしたコンポーネント (roughBar) をアプリケーションで使用できるようにするためのものです。
  • <rough-bar :data="[...]" /> — ここで外側の rawBar コンポーネントを呼び出します。これらのコンポーネントで指定されるプロパティは必須のプロパティです。

vue-roughviz の小道具

必要なプロパティはデータのみです。これはチャートを作成するために使用されるデータです。これは文字列またはオブジェクトにすることができます。

オブジェクトが選択されている場合、ラベルと値キーが含まれている必要があります。代わりに文字列を使用する場合、その文字列は csv または tsv ファイルの URL である必要があります。このファイルでは、各列を表す個別の属性としてラベルと値も指定する必要があります。

その他の便利な小道具は次のとおりです:

  1. title - チャートのタイトルを指定します
  2. 粗さ - チャートの粗さのレベル
  3. ストローク——バーのストロークの色
  4. ストローク幅
  5. fill-weight – 内側のパスの色の太さを指定します。
  6. fill-style - バーの塗りつぶしスタイル。次のいずれかになります。
  • 破線
  • 固体
  • ジグザグ線
  • クロスハッチ
  • ハチュレ
  • ジグザグ

走る

アプリケーションをプレビューするには、npm run serve を実行します。上記の手順を正しく実行した場合、http://localhost:8080 にアクセスすると、ブラウザにグラフが表示されます。

外部APIからデータを読み込む

ちょっとした実験をして、ビットコインの過去 10 日間の価格履歴をチャートに表示してみましょう。この実験では、Coingecko API を使用します。

Coingecko を選ぶ理由他の暗号通貨 API とは異なり、Coingecko は無料で、開始するために API キーを必要としないため、私たちの実験に最適です。

src/App.vueを次のコードに置き換えてください。

<テンプレート>
 
 <div id="アプリ">
  
 <div>
   
  <rough-bar v-if="chartValue.length > 0" :data="{
     ラベル: chartLabel、
     値: チャート値、
    }" title="BTC - 10日間" 粗さ="3" ストローク="黒" ストローク幅="1" 塗りつぶしスタイル="ジグザグ" 塗りつぶし太さ="2" />
  
 </div>
 
 </div>

</テンプレート>

Coingecko API からビットコインの価格履歴を取得し、返されたデータをループする非同期メソッド loadData() を作成します。日付と価格を分離し、返された日付をグラフのラベルとして使用し、価格をグラフの値として使用します。そして、beforeMount()、つまりアプリケーションがビューにマウントされる前に、先ほど作成した loadData() 関数を呼び出します。

アプリケーションを実行すると、グラフに次のような新しい変更が反映されます。

上記は、RoughViz を使用して Vue.js でスケッチ チャートを視覚化する方法の詳細です。Vue.js でのスケッチ チャートの RoughViz 視覚化の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • laravel + vue で実装されたデータ統計描画 (今日、7 日間、30 日間のデータ)
  • Vue+jsplumbで線画を実現

<<:  LinuxサーバーにGRUBをインストールする手順

>>:  Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

推薦する

div の幅が width:100% に設定されていて、パディングまたはマージンが親要素を超えてしまう問題の解決方法

序文この記事では、div の幅を 100% に設定し、親要素を超えてパディングまたはマージンを設定す...

画像ブラインド表示の効果を実現するための純粋な CSS の例

まず、完成した効果をお見せしましょう 主なアイデア: 実際、このブラインドは一種の手品を使用していま...

Apache での ModSecurity のインストール、有効化、および構成

ModSecurity は、Web サーバーに入るすべてのパケットをチェックする強力なパケット フィ...

CSS 位置固定左と右の二重配置実装コード

CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...

QQブラウザ機能を実装するためのCSS

コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...

Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明

目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

MySQL でよく使われる連結文のまとめ

はじめに: MySQL では、CONCAT() 関数を使用して複数の文字列を 1 つの文字列に連結し...

Vueはシンプルなデータ双方向バインディングを実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。初心者...

Linuxコマンドをバックグラウンドで実行する方法

通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...

JavaScript 以外の静的リソースのバンドルの詳細

目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....

HTMLを圧縮しない理由はいくつかある

理由は簡単です。 HTML ドキュメントでは、複数の空白文字は 1 つの空白文字と同等です。つまり、...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

CSS3 で @media を使用して Web ページの適応を実現するためのサンプル コード

現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...

MySQL よく使われる関数の詳細な概要

目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...