導入チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグラフィカルな表現です。ほとんどのユーザーは、すっきりとした正式な図を見ることに慣れていますが、手描きまたはスケッチされた図を好むユーザーもいます。そこで、roughViz が役立ちます。 roughViz は、D3.js と Rough.js をベースにした JavaScript ライブラリです。このライブラリは、以下の例のように、スケッチや手描きの図のような図を作成できるように設計されています。 このガイドでは、vue-roughviz を使用して Vue.js アプリケーションでスケッチのような図を表示する方法と、vue-cli を使用して Vue アプリケーションを構成する方法を学習します。 前提条件このチュートリアルでは、次の前提条件が満たされていることを前提としています。
始める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 チャート スタイル コンポーネントを提供します。
使用プロジェクトに 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> </テンプレート> コードの説明
vue-roughviz の小道具必要なプロパティはデータのみです。これはチャートを作成するために使用されるデータです。これは文字列またはオブジェクトにすることができます。 オブジェクトが選択されている場合、ラベルと値キーが含まれている必要があります。代わりに文字列を使用する場合、その文字列は csv または tsv ファイルの URL である必要があります。このファイルでは、各列を表す個別の属性としてラベルと値も指定する必要があります。 その他の便利な小道具は次のとおりです:
走るアプリケーションをプレビューするには、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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。
序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...
間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...
mysql5.7.21の簡単なインストール構成は次のとおりです。 1. MySQLのインストール1....
非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...
目次1. 準備2. MySQL暗号化関数方式2.1 MySQL 暗号化2.2 MYSQL 復号化3....
1. docker設定ファイルを変更し、ポート2375を開きます。 [root@s162 docke...
目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...
今日は、CentOS 6.8 サーバーに MySQL 8.0.18 をインストールする方法を記録しま...
この記事では、Windows で MySQL をインストールする方法について簡単に説明します。他にご...
現在、クラウドサーバーに nginx をインストールする際、最初に zlib などの依存ライブラリを...
目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...
JS で関数を定義する 3 つの方法例を挙げて説明しましょう。 <スクリプト> //メソ...
序文LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
序文RabbitMQ を使用する場合、一定期間クライアントと RabbitMQ サーバーの間でトラフ...
<br />HTML 言語では、タグを使用してテーブルにタイトルを自動的に追加できます。...