質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

toshihirokato
toshihirokato

総合スコア20

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0リアクション

1クリップ

5487閲覧

投稿2019/12/24 01:28

編集2019/12/27 19:09

前提・実現したいこと

前回の投稿で、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" } }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。