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 である必要があります。このファイルでは、各列を表す個別の属性としてラベルと値も指定する必要があります。

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

title - チャートのタイトルを指定します
粗さ - チャートの粗さのレベル
ストローク——バーのストロークの色
ストローク幅
fill-weight – 内側のパスの色の太さを指定します。
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() 関数を呼び出します。

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