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 のリストを取得します。

推薦する

Windows で複数の MySQL インスタンスを実行する方法

序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...

間違った MySQL コマンドをキャンセルしたい場合はどうすればいいですか?

間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...

MySQL 5.7.21 のインストールと設定のチュートリアル

mysql5.7.21の簡単なインストール構成は次のとおりです。 1. MySQLのインストール1....

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

MySQL データベースで機密データの暗号化と復号化を実装する方法

目次1. 準備2. MySQL暗号化関数方式2.1 MySQL 暗号化2.2 MYSQL 復号化3....

アイデアをDockerに接続してワンクリックでデプロイする方法

1. docker設定ファイルを変更し、ポート2375を開きます。 [root@s162 docke...

MySQL で重複行を見つけて削除する方法

目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...

CentOS 6.8 に MySQL 8.0.18 をインストールするチュートリアルの簡単な分析 (RPM 方式)

今日は、CentOS 6.8 サーバーに MySQL 8.0.18 をインストールする方法を記録しま...

Windows (コミュニティ エディション) に MySQL 8.0.18 をインストールするためのチュートリアル

この記事では、Windows で MySQL をインストールする方法について簡単に説明します。他にご...

yum インストールエラーの問題を解決する 保護されたマルチライブラリバージョン

現在、クラウドサーバーに nginx をインストールする際、最初に zlib などの依存ライブラリを...

Dockerサーバーのストレージリソースプール不足問題の解決

目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...

関数の分類の詳細な説明とJavascriptでのこのポイントの例

JS で関数を定義する 3 つの方法例を挙げて説明しましょう。 <スクリプト> //メソ...

crontab 実行時間とシステム時間の不一致の解決方法

序文LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

Rabbitmq heartbea ハートビート検出メカニズムの原理の分析

序文RabbitMQ を使用する場合、一定期間クライアントと RabbitMQ サーバーの間でトラフ...

HTML テーブル マークアップ チュートリアル (14): テーブル ヘッダー

<br />HTML 言語では、タグを使用してテーブルにタイトルを自動的に追加できます。...