Nuxt.jsでFusionChartsを入れたので、その覚書。 最初はVueフレームワークで導入を試みようとしたのですが、エラーが消えなかったので断念。VueとNuxtの超えられない壁を感じたのですが、githubにnuxtで動かしている人もいて、多分nuxtでも動かせるんだろうけど、私の知識不足により実現できていません。 先輩の偉大な助けにより、vue dependencyをプラグイン化することで解決しました。ありがたやありがたや。 [Nuxt.js]FusionCharts導入覚書 – Vueフレームワーク編 ちなみに該当githubはこちら。プロジェクトをDLして動かしたら、選択できる地図が現れました。気になる方は動かしてみてください。 https://github.com/ICJIA/fusioncharts-test Plain JavaScriptで動かす というわけで、シンプルにPlain JavaScriptで動かすことにしました。 公式のGet Startedはこちらです。 https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-chart-using-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 … Continue reading [Nuxt.js]FusionCharts導入覚書 – Plain javascript編