Help us understand the problem. What is going on with this article?

vue-c3 でグラフをぐいぐい描く

More than 1 year has passed since last update.

何でグラフを描くか

グラフを何で描くかという問題はみなさんそこそこ悩まれていると思います。

生 SVG でフルスクラッチ

次の記事は Vue + 生の SVG で実装しています。(Vue.jsでD3.jsを使わずにグラフを実装する)

SVG を使う利点については「カスタマイズのしやすさと、D3 といったライブラリによって DOM が直接変更されないので、テストもしやすい」と述べられています。

確かに SVG で実装するのはこの記事を参照するとそこまで難しくなく(また記事がとても丁寧なので難しい部分もうまくクリアーできます)、どんなに複雑なグラフでも実装できるという意味で、フロントエンドエンジニアであれば、一度はチャレンジする価値があると思いました。

C3.js + Vue = vue-c3

Screen Shot 2018-08-15 at 7.32.08 PM.png

https://c3js.org/

C3 は D3 をベースにしたグラフを描画するライブラリで、D3 よりも書くコードが少なくグラフを実装できます。一般的なグラフであれば、これで間に合いそうです。

この C3 を Vue のコンポーンネントとして組み込める様になっているのが vue-c3 です。

https://www.npmjs.com/package/vue-c3

これはなかなかいい感じらしいです。確かに使ってみた感じ、取っ散らからない気がします。

実装

(CSS の読み込みについてはこちらの記事が参考になりました。ありがとうございます。https://qiita.com/maunamoana/items/e5da5e338a45a35524b8)

次のコードが実装結果です。
https://codesandbox.io/s/w026o6xy7l?module=%2Fsrc%2FApp.vue

ポイントは
- メインのコンポーネントは <vue-c3/>
- これに handler という名前で渡す
- 渡すのは new Vue() で生成したもの
- これに対して、this.handler.$emit('dispatch', chart => chart.load()) という形で C3 の API を実行する
- 実行する API、その際に渡す値等は C3 のドキュメントを参照する

<template>
  <div>
    <vue-c3 :handler="handler"></vue-c3>
  </div>
</template>
<script>
// hander のために必要
import Vue from 'vue'

// メインのコンポーネント
import VueC3 from 'vue-c3'

// CSS を読み込む
import 'c3/c3.min.css'

export default {
  name: 'demo',
  components: {
    VueC3
  },
  data: () => ({
    // vue-c3 コンポーネントを操作するためのもの
    handler: new Vue(),
  })
}
</script>
this.handler.$emit('dispatch', chart => {
   const options = {...} // もろもろ作る
   chart.load(options)
})

this.handler.$emit('init', this.options)

最初はこれを実行してグラフを作成する。おそらく C3 のほうでいうところの Generate を実行している。(https://c3js.org/gettingstarted.html#generate)

特にグラフを更新したりする必要がなければ、この際に渡す option だけうまく指定してあげれば、綺麗がグラフが作成される。

this.handler.$emit('dispatch', chart => chart.load(options))

C3 の各種 API を叩く際には dispatch を emit する。これで全ての API が叩ける。

例えばデータを更新したければ load 用の API を叩けばいい。https://c3js.org/gettingstarted.html#api

tooltip

書くデータの点にマウスオーバーした際に表示されるものが tooltip だ。これの内容も設定で変更できる。

Screen Shot 2018-08-15 at 8.02.08 PM.png

今回は「億円」や「期」という単位をつけている。このような単純な処理だけではなく、format を使えば、様々処理ができる。

まとめ

そこそこ早くとっちらかりもしないので、vue-c3 よい。

superyusuke
最近は自分のサイトで技術情報を公開 https://uncle-javascript.com/article/ React 公式ドキュメントトップページの翻訳を担当。React.TypeScript Japan User Group 主宰 https://react-japan-user-grpup.connpass.com/
https://uncle-javascript.com/article/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした