Nuxt.js で jQuery, Chart.js を使用する。

Question

前提・実現したいこと

前回の投稿で、vue-chartjs, Chart.js を使ってレーダーチャートを作成する方法についてご質問させていただきました。

これを機に、他の方法でもレーダーチャートを作成してみたいと思い色々調べていたところ、こちらのサイトを見つけました。

サイトでは、一般的な HTML&CSS, jQuery, Chart.js を用いてレーダーチャートを作成されていましたが、

勉強も兼ねて、 Nuxt.js で jQuery を使用できるようにしようとしたところ jQuery のメソッドが読みこまれず以下のエラー

が発生いたしました。

発生している問題・エラーメッセージ

  54:15  error  'Chart' is not defined                          no-undef
  102:21  error  'Chart' is not defined                          no-undef
  102:27  error  '$' is not defined                              no-undef
  105:1   error  '$' is not defined                              no-undef
  114:7   error  'colorName' is assigned a value but never used  no-unused-vars
  117:1   error  '$' is not defined                              no-undef
  118:21  error  'colorNames' is not defined                     no-undef
  118:62  error  'colorNames' is not defined                     no-undef
  136:1   error  '$' is not defined                              no-undef
  147:1   error  '$' is not defined                              no-undef
  153:1   error  '$' is not defined                              no-undef

✖ 11 problems (11 errors, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

該当のソースコード

<template>
  <!-- チャート描画キャンバス -->
  <div>
    <canvas id="myChart" />
    <!-- 各ボタン -->
    <div style="text-align: center;">
      <button id="randomizeData">
        ランダムデータ
      </button>
      <button id="addDataset">
        データセットの追加
      </button>
      <button id="removeDataset">
        データセットの削除
      </button>
      <button id="addData">
        データの追加
      </button>
      <button id="removeData">
        データの削除
      </button>
    </div>
  </div>
</template>

<script>
export default {
  head () {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js' },
        { src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', type: 'text/javascript' }
      ]
    }
  }
}
// 色の設定
const colorSet = {
  red: 'rgba(255, 99, 132)',
  orange: 'rgba(255, 159, 64)',
  yellow: 'rgba(255, 205, 86)',
  green: 'rgba(75, 192, 192)',
  blue: 'rgba(54, 162, 235)',
  purple: 'rgba(153, 102, 255)',
  grey: 'rgba(201, 203, 207)'
}

// 乱数生成(0~100)
const rnd100 = function () {
  return Math.round(Math.random() * 100)
}

// 色のRGB変換
const color = Chart.helpers.color

// チャートの初期設定
const config = {
  type: 'radar',
  data: {
    labels: ['', '', '', '', ''],
    datasets: [{
      label: '',
      backgroundColor: color(colorSet.orange).alpha(0.6).rbgString(),
      borderColor: colorSet.orange,
      pointBackgroundColor: colorSet.orange,
      data: [100, 90, 80, 70, 60]
    }]
  },
  options: {
    animation: false,
    showTooltips: false,
    legend: { position: 'bottom' },
    title: {
      display: true,
      fontSize: 20,
      fontColor: '#666',
      text: ''
    },
    scale: {
      display: true,
      pointLabels: {
        fontSize: 15,
        fontColor: colorSet.gray
      },
      ticks: {
        display: true,
        fontSize: 12,
        fontColor: colorSet.green,
        min: 0,
        max: 100,
        beginAtZero: true
      },
      gridLines: {
        display: true,
        color: colorSet.gray
      }
    }
  }
}

// チャートの作成
const myRadar = new Chart($('#myChart'), config)

// ランダムデータ(#randomizeData)
$('#randomizeData').click(function () {
  config.data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(function () {
      return rnd100()
    })
  })
  myRadar.update()
})

const colorName = Object.keys(colorSet)

// データセットの追加(#addDataset)
$('#addDataset').click(function () {
  const colorName = colorNames[config.data.datasets.length % colorNames.length]
  const newColor = colorSet[colorName]

  const newDataset = {
    label: 'Dataset ' + config.data.datasets.length,
    borderColor: newColor,
    backgroundColor: color(newColor).alpha(0.2).rbgString(),
    pointBorderColor: newColor,
    data: []
  }
  for (let index = 0; index < config.data.labels.length; ++index) {
    newDataset.data.push(rnd100())
  }
  config.data.datasets.push(newDataset)
  myRadar.update()
})

// データの追加(#addData)
$('#addData').click(function () {
  if (config.data.datasets.length > 0) {
    config.data.labels.push('dataset #' + config.data.length)
    config.data.datasets.forEach(function (dataset) {
      dataset.data.push(rnd100())
    })
    myRadar.update()
  }
})

// データセットの削除(#removeDataset)
$('#removeDataset').click(function () {
  config.data.datasets.splice(0, 1)
  myRadar.update()
})

// データの削除(#removeData)
$('#removeData').click(function () {
  config.data.labels.pop() // remove the label first
  config.data.datasets.forEach(function (dataset) {
    dataset.data.pop()
  })
  myRadar.update()
})
</script>

<style>

</style>

該当のソースコード

import colors from 'vuetify/es5/util/colors'

import webpack from 'webpack'

export default {
  mode: 'spa',
  srcDir: 'app',
  /*
  ** Headers of the page
  */
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js' },
      { src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', type: 'text/javascript' }
    ],
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/firebase',
    '~/plugins/chart.js'
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
    publishPath: 'https://cdnjs.cloudfire.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js',
    vendor: ['jquery', 'chart.js'],
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery'
      })
    ],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

試したこと

Nuxt.js の公式ドキュメントや、Nuxt x CDN について、jQuery で作ったメソッドを Nuxt.js で使う 等のサイトを参考にしましたが、結局解決に至りませんでした。

補足情報（FW/ツールのバージョンなど）

{
  "name": "",
  "version": "1.0.0",
  "description": "My epic Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.8.0",
    "chart.js": "^2.9.3",
    "eslint-plugin-import": "^2.19.1",
    "firebase": "^7.6.0",
    "jquery": "^3.4.1",
    "nuxt": "^2.10.2",
    "vue-chartjs": "^3.5.0",
    "yarn": "^1.21.1"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.1.0",
    "@nuxtjs/vuetify": "^1.9.1",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-nuxt": ">=0.5.0"
  }
}

Answer 1

レーダーチャートを編集する際に、以下のサイトが参考になりましたのでこちらに追加で添付させていただきます。

http://www.kogures.com/hitoshi/javascript/chartjs/radar.html

Answer 2

https://qiita.com/g-taguchi/items/15b2f5392f5556ac5a70
ここに書いてるとおりですが

main.jsに

import jQuery from 'jquery'
global.jquery = jQuery
global.$ = jQuery
window.$ = window.jQuery = require('jquery')

と書くと良さそうです

Comments

[toshihirokato]

ご回答ありがとうございます！
早速、実装してみます！！

[toshihirokato]

ありがとうございます！
無事解決いたしました！！