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용 래퍼입니다. 고맙게 사용하겠습니다.
htps : // 기주 b. 이 m /에서 vs rk-ko m /

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 토큰

여기에서 발행할 수 있습니다. 자세한 내용은 구구 해보세요.
htps : // c ぉ d. 오, ぇ. 코 m/마 ps-pぁt후 rm/

튜토리얼

도도부현별 인구를 플로팅해 봅니다. 데이터는 통계국에서.

키모는 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 옵션 지정 방법이 잘못되었습니다 (2018/9/25 현재)

region을 지정하고 있는데 왠지 default값(world)이 되어 세계지도가 표시되었다

적당히 CN라든지 IT라든지 변경하고 있으면 나라별 표시가 되었으므로, 희미하게 JP로 하면 고쳤습니다. . . ?

각 Option의 의미는 공식 매뉴얼을 참조하십시오. 색상도 바꿀 수 있어요.
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 짱 rt / 인테라 c 치ゔ / cs / ぇ ry / 게오 챠 rt

그럼!