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

Advertisements

nuxt.js

2022.07.282022.06.02

Nuxt.jsでFusionChartsを入れたので、その覚書。

最初はVueフレームワークで導入を試みようとしたのですが、エラーが消えなかったので断念。VueとNuxtの超えられない壁を感じたのですが、githubにnuxtで動かしている人もいて、多分nuxtでも動かせるんだろうけど、私の知識不足により~~実現できていません~~。

先輩の偉大な助けにより、vue dependencyをプラグイン化することで解決しました。ありがたやありがたや。

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

前回書いたFusionCharts導入覚書 - Plain javascript編のvueバージョンです。以前はVueフレームワークバージョンのfusionChartsを使うと動かなかったのですが、大先輩の偉大な助けに...

ちなみに該当githubはこちら。プロジェクトをDLして動かしたら、選択できる地図が現れました。気になる方は動かしてみてください。

GitHub - ICJIA/fusioncharts-test: working fusion charts with nuxt

working fusion charts with nuxt. Contribute to ICJIA/fusioncharts-test development by creating an account on GitHub.

Plain JavaScriptで動かす

というわけで、シンプルにPlain JavaScriptで動かすことにしました。

公式のGet Startedはこちらです。

Create a Chart Using FusionCharts | FusionCharts

This article outlines the steps to be executed for creating your first chart using the plain javascript.

前提条件

npmでfusionchartsをインストールする場合は、Node.jsのインストールが必要です。

インストール

CDN、ローカルファイル、npmのそれぞれでインストールする方法があります。

CDNの場合は、nuxt.config.jsのhead: { script: [ {src: ”,}, ],}部分にcdnソースを2つ、盛り込みましょう。


  head: {
    script: [
      // Step 1 - Include the fusioncharts core library
      {
        src: 'https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js',
      },
      // Step 2 - Include the fusion theme
      {
        src: 'https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js',
      },
    ],

はい。

私はnpmでインストールしました。

既存のnuxt.jsプロジェクトディレクトリで、npmを叩くだけ。先に最新のwebpackを入れておきます。

$ npm install webpack webpack-cli --save-dev
$ npm install fusioncharts

テンプレートを用意

pages>fusioncharts>index.vueを作成し、templateを用意。必要なdependencyをimportします。

<template>
  <div>
    <div id="chart-container">FusionCharts XT will load here!</div>
  </div>
</template>

<script>
// Include the core fusioncharts file from core
import FusionCharts from 'fusioncharts/core'
// Include the chart from viz folder
import Column2D from 'fusioncharts/viz/column2d'
// Include the fusion theme
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'
// Add the chart and theme as dependency
// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D)
FusionCharts.addDep(FusionTheme)
</script>

これで準備完了です。

データを用意

チャートを作成するにはデータが必要ですね。例として、ここでは世界の石油保有国とその量を示した2D chart を表現することにしましょう（公式に沿ってるだけですよ）。


// Preparing the chart data
const chartData = [
  {
    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"
  }
];

チャート設定

データが用意できたので、いよいよ次はチャートの設定部分です。以下では公式の例をそのまま載せていますが、掲載されているオプションを元に色々カスタマイズができます。

// Create a JSON object to store the chart configurations
const chartConfig = {
  // チャートのタイプ
  type: "column2d",
  // Set the container object
  renderAt: "chart-container",
  // Specify the width of the chart
  width: "100%",
  // Specify the height of the chart
  height: "400",
  // Set the type of data
  dataFormat: "json",
  dataSource: {
    chart: {
      // Set the chart caption
      caption: "Countries With Most Oil Reserves [2017-18]",
      // Set the chart subcaption
      subCaption: "In MMbbl = One Million barrels",
      // Set the x-axis name
      xAxisName: "Country",
      // Set the y-axis name
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      // Set the theme for your chart
      theme: "fusion"
    },
    // Chart Data from Step 2
    data: chartData
  }
};

FusionChartsをmoutedで描画

最後に、FusionChartsをMountedします。

export default {
  mounted() {
    FusionCharts.ready(function () {
      console.log('passed FunctionChart')
      const fusioncharts = new FusionCharts(chartConfig)
      fusioncharts.render()
    })
    console.log('mounted!')
  },
}

npx nuxtした際の見た目