[Nuxt.js]FusionCharts導入覚書 – Vueフレームワーク編

前回書いた[Nuxt.js]FusionCharts導入覚書 – Plain javascript編のvueバージョンです。

[Nuxt.js]FusionCharts導入覚書 – Plain javascript編

以前はVueフレームワークバージョンのfusionChartsを使うと動かなかったのですが、大先輩の偉大な助けにより解決したので備忘録。
結論から言うと、FusionChartsのプラグイン化が必要でした。

Vueを使っている人は、シンプルにこちらを参照すれば実装できると思います。
https://cfusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs

バージョン

• MacOs 12.1
• node v16.2.0
• yarn 1.22.10
• nuxt 2.15.7
• fusioncharts 3.18.0

ライブラリを追加

fusionchartsは3系だとエラーが出るので2系に。該当のプロジェクト内で下記を実行。

$ yarn add fusioncharts
$ yarn add 'vue-fusioncharts@^2.0.4'

npm の人

$ npm install fusioncharts vue-fusioncharts --save
$ npm install vue-fusioncharts@^2.0.4' --save

plugins/fusioncharts.js

pluginsにDependencyを追加。
チャートの種類などはここに記載されている。
https://www.fusioncharts.com/dev/chart-guide/list-of-charts

import Vue from 'vue'
import VueFusionCharts from 'vue-fusioncharts'
import FusionCharts from 'fusioncharts'
import Charts from 'fusioncharts/fusioncharts.charts'
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

Vue.use(
  VueFusionCharts,
  FusionCharts,
  Charts,
  FusionTheme
)

nuxt.config.js

plugins: [{ src: '~/plugins/fusioncharts.js', ssr: false }],

pages/chart.vue

ページ名はなんでもいいですが…

<template>
  <div>
    <Header></Header>
    <section class="container">
      <client-only>
        <div>
          <fusioncharts
            :type="type"
            :width="width"
            :height="height"
            :dataFormat="dataFormat"
            :dataSource="dataSource"
          ></fusioncharts>
        </div>
      </client-only>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: '100%',
      height: '400',
      type: 'column2d',
      dataFormat: 'json',
      dataSource: {
        'chart': {
          'caption': 'Countries With Most Oil Reserves [2017-18]',
          'subCaption': 'In MMbbl = One Million barrels',
          'xAxisName': 'Country',
          'yAxisName': 'Reserves (MMbbl)',
          'numberSuffix': 'K',
          'theme': 'fusion',
        },
        'data': [
          {
            'label': 'Venezuela',
            'value': '290',
          },
          {
            'label': 'Saudi',
            'value': '260',
          },
          {
            'label': 'Canada',
            'value': '180',
          },
          {
            'label': 'Iran',
            'value': '140',
          },
          {
            'label': 'Russia',
            'value': '115',
          },
          {
            'label': 'UAE',
            'value': '100',
          },
          {
            'label': 'US',
            'value': '30',
          },
          {
            'label': 'China',
            'value': '30',
          },
        ],
      },
    }
  },
}
</script>