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

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

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

# 用意したもの
#### Vue.jsの環境

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

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

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

#### 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` の内容そのまま行きます。

```vue
<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
```

### チュートリアルの結果
<img width="573" alt="スクリーンショット 2018-09-25 22.10.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/236279/c7d7666c-a7aa-da97-d8dd-8c0053d23cea.png">

簡単ですね。

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

## 追加で用意したもの
#### Google Map APIのトークン
ここから発行できます。詳しくはググってみてください。
https://cloud.google.com/maps-platform/

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

キモは、SettingsとOptionsです。

```vue
<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>
```

### 結果
<img width="652" alt="スクリーンショット 2018-09-25 22.35.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/236279/b10529ab-e01e-5057-92e3-c55145134ae4.png">

できました〜！[e-Statの統計GIS](https://www.e-stat.go.jp/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

それでは！