Google Charts を Vue.js で使ってみる

Google Chart　使ってますか？これめっちゃ便利ですね。私は一昨日知りました。。。

公式のGetStartedを試しましたが素のままだと面倒な上に面白くないので、 Vue.js から Google Charts を使ってみました。

用意したもの

Vue.jsの環境

CLIでサクッと作ってください。

npx @vue/cli create vue-chart
# お好みでプロジェクトを作ってください

CLIはプロジェクト作るときぐらいにしか使わないのでnpx / yarn runで十分です。npmは可能な限りグローバルにインスコしたくないですね。。。
（12/7追記：つい先日話題になった、bitcoinマイニングするパッケージが紛れ込んだままになっちゃった、なんてこともなくなります）
気づいたらゴミが溜まりそうなので。npxってなんぞやという方はこちらをどうぞ。
local にインストールした node module package の実行方法 - Qiita
　　
ちなみに、Vue-CLI2で作った足場をDockerのコンテナの中で動かそうとしてる人は注意です。
vue-cli のテンプレートを Docker で動かす時の注意 - Qiita

vue-google-charts

GoogleChartsのVue向けのラッパーです。ありがたく使わせていただきます。
https://github.com/devstark-com/vue-google-charts

npm install vue-google-charts

チュートリアル

CLIで作成した src/App.vue をいじっていきます。 vue-google-charts の内容そのまま行きます。

<template>
  <div id="contents">
    <GChart
      type="ColumnChart"
      :data="chartData"
      :options="chartOptions"
    />
  </div>
</template>

<script>
import { GChart } from 'vue-google-charts';

export default {
  components: {
    GChart
  },
  data() {
    return {
      chartData: [
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
      ],
      chartOptions: {
        title: 'Company Performance',
        subtitle: 'Sales'
      }
    };
  }
};
</script>

これだけです。サーバーを起動させて見ましょう。

npm run serve

チュートリアルの結果

簡単ですね。

応用編

せっかくGoogle Chartを使っているんだから、Google Map APIを使ってMapGraphに挑戦しました。

追加で用意したもの

Google Map APIのトークン

ここから発行できます。詳しくはググってみてください。
https://cloud.google.com/maps-platform/

チュートリアル

都道府県別の人口をプロットしてみます。データは統計局から。

キモは、SettingsとOptionsです。

<template>
  <div id="contents">
    <GChart
      :settings="chartSettings"
      type="GeoChart"
      :data="chartData"
      :options="chartOptions"
    />
  </div>
</template>

<script>
import { GChart } from 'vue-google-charts';

export default {
  components: {
    GChart
  },
  data() {
    return {
      chartSettings: {
        packages: ['geochart'],
        'mapsApiKey': 'ここにGoogleMapAPI-key'
      },
      chartData: [
        ['Pref', 'Population'],
        ['北海道', 5352],
        ['青森', 1293],
        ['岩手', 1268],
        ['宮城', 2330],
        ['秋田', 1010],
        ['山形', 1113],
        ['福島', 1901],
        // 以下略
      ],
      chartOptions: {
        region: 'JP',
        resolution: 'provinces',
        displayMode: 'regions',
      }
    };
  }
}
</script>

結果

できました〜！e-Statの統計GISよりもきれいでいいですね！ただし、geochartで都道府県別以上に細かくするにはresolutionをmarkerにする必要があるのでその場合は統計GISのほうがキレイに出るかもしれません・・・）

ハマりポイント

• vue-google-chartのREADMEのOptionの指定方法が間違っていた（2018/9/25現在）
• regionを指定しているのに何故かdefault値(world)になって世界地図が表示された
  • 適当にCNとかITとか変更してたら国別表示になったので、すかさずJPにしたら直りました。。。？

それぞれのOptionの意味は公式マニュアルを参考にしてください。色とかも変えられますよ。
https://developers.google.com/chart/interactive/docs/gallery/geochart

それでは！