Vue.js Vue-Tree-Chartを利用してデータをツリーチャートで表示する

Vue.js Vue-Tree-Chartを利用してデータをツリーチャートで表示する

tree-chartが簡単に実装できるVue-Tree-Chartを利用した簡単なサンプルコード

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

Vue.js環境構築

今回はvueapp1という名前でプロジェクトを作成してます。

Vue-Tree-Chartインストール

Vue-Tree-Chartをインストールします。

Vue-Tree-Chartの利用

vue-tree-chartを利用するための簡単サンプルコードとなります。

こちらの公式を参考にしてます。

src配下のapp.vueに下記のコードを記述します。

ブラウザから http://プライベートIP:8080 にアクセスするとtree-chartが実現されていることが確認できます。