Edited at

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"
/>
</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

それでは!