導入チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグラフィカルな表現です。ほとんどのユーザーは、すっきりとした正式な図を見ることに慣れていますが、手描きまたはスケッチされた図を好むユーザーもいます。そこで、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 のリストを取得します。
序文この記事では、div の幅を 100% に設定し、親要素を超えてパディングまたはマージンを設定す...
まず、完成した効果をお見せしましょう 主なアイデア: 実際、このブラインドは一種の手品を使用していま...
ModSecurity は、Web サーバーに入るすべてのパケットをチェックする強力なパケット フィ...
CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...
コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...
はじめに: MySQL では、CONCAT() 関数を使用して複数の文字列を 1 つの文字列に連結し...
この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。初心者...
通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...
目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....
理由は簡単です。 HTML ドキュメントでは、複数の空白文字は 1 つの空白文字と同等です。つまり、...
最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...
現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...
目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...