• こんにちは

  • 今日話す内容

    • グラフを使う理由
    • 目的に合ったグラフを使う
    • Chart.js について
    • vue-chart.js で reactive な component を作る
    • tooltipModel を活用してみる
  • 1: グラフを使う理由

  • とある学校のA組からE組のテスト結果

    一番成績の良かったクラスと悪かったクラスは?

    クラス\教科英語数学国語理科社会合計
    A組 80 90 50 90 80 390
    B組 70 70 70 80 70 360
    C組 50 60 80 70 90 350
    D組 50 90 80 30 90 340
    E組 50 80 70 40 90 330
  • 棒グラフにして得点を比較する

  • 比較したい箇所を強調する事ができる

  • 2: 目的に合ったグラフを使う

  • グラフには色々な種類がある

    棒グラフ棒の長さで量の大小を比較する
    折れ線グラフ変化の方向をみる
    円グラフ全体の中での構成比をみる
    帯グラフグループ毎の構成比を比較する
    ヒストグラムデータの散らばり具合をみる
    散布図2種類のデータの相関をみる
    箱ひげ図データの散らばり具合をみる
    三角グラフ3つの量からなる構成比をみる
  • 用途に合わせて使うグラフを決めましょう

    • いきなり実装せずにヒアリングする事が大事
    • 比較したい事象が何なのかを聞いてあげる
    • 場面に応じて良さげなグラフを提案してあげる
    • どんなメッセージを伝えたいのかを考える
  • 3: Chart.js

  • Chart.js について

    • グラフを簡単に生成できるツール
    • canvas の上に描画されるが知識ほぼ不要
    • getContext()を呼び出すだけで良い
    • 公式ドキュメントに慣れるまでちょっとてこずるかも
    • 私の中では利用頻度がかなり高いライブラリです
  • 4: vue-chart.js

  • Chart.js を reactive な component にする

    • 最近はNuxt.jsを使って開発する事が多い
    • Chart.js を Vue.js で wrap する vue-chart.js を使った
    • 割と面倒な処理を wrap してくれるので素直に使った方が楽
    • canvas が描画されるまで待ってから getContext() を呼び出すなど
    • reactive にしたい場合はドキュメントに書かれている通りにすればいい
  • vue-chart.js を使うとものすごく簡単です

    import { HorizontalBar, mixins } from 'vue-chartjs'
    const { reactiveProp } = mixins
    
    export default {
      extends: HorizontalBar,
      mixins: [reactiveProp],
      props: ['options'],
      mounted () {
        // this.chartData is created in the mixin.
        // If you want to pass options please create a local options object
        this.renderChart(this.chartData, this.options)
      }
    }
    
  • 6: tooltip

  • tooltip の event を利用して見栄えを良くする

    • 基本的に大体の事は Chart.js が良きに図らってれます
    • 見栄えを工夫したい場合はtooltip が表示されるタイミング
    • Chart.js では tooltip をカスタマイズできるように callback を渡せる
    • その callback は tooltipModel を引数に受け取れる
    • 自前の tooltip を表示する他に、別のグラフを呼び出す事も可能
    • Demo
  • まとめ

    • グラフ化すると数値だけでは読みとれない情報を視覚化できる
    • ただし伝えたいメッセージがそこに無ければ意味がない
    • どんなグラフが必要とされているのか考えましょう
    • Chart.js はグラフを作る際にとても便利です
    • Vue.js と一緒に使う場合は vue-chart.js がおすすめ
    • さらに見栄えを良くしたい場合は tooltipModel を活用してみましょう
  • あとそれから

    • 絶賛お仕事募集中です
    • 最大で週3日の稼働が可能です
    • スポットでのご依頼も承ります
    • Vue.js か Node.js でフルリモートの案件をお待ちしております
  • ご静聴ありがとうございました

Item 1 of 20
[ja]Data visualization with Chart.js