Как создать круговую диаграмму при помощи canvas?

Question

[Alex_87]

Добрый вечер! Из этого кода, должна получиться круговая диаграмма и цифры. Вместо этого, выходит ошибка: что переменная name не определена и другие ошибки. Прошу помочь мне в этом. Первый раз с canvas сталкиваюсь. Не получается её решить.

https://codepen.io/Alexei_87/pen/xxxqVyM

Answer 1

[Gor Mkhitaryan]

У вас подключены все необходимые библиотеки для работы с библиотекой Chart? Возможно там нужна jQuery. Скиньте полный лог ошибок чтобы было понятно что происходит.

Comments

[Alex_87]

Вот какие ошибки выдаются:
Html Webpack Plugin:

ReferenceError: name is not defined

- loader.js:16 eval
[index.html?.]/[html-webpack-plugin]/lib/loader.js:16:10

- loader.js:34 module.exports
[index.html?.]/[html-webpack-plugin]/lib/loader.js:34:3

- index.js:284 Promise.resolve.then
[Webpack-Bootstrap22222]/[html-webpack-plugin]/index.js:284:18

- next_tick.js:68 process._tickCallback
internal/process/next_tick.js:68:7

P.S. Обратите пожалуйста внимание на мой комментарии чуть ниже. Там я написал код webpack и package.json

Answer 2

[Alex_87]

webpack.config

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const fs = require('fs')

function generateHtmlPlugins(templateDir) {
  const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
  return templateFiles.map(item => {
    const parts = item.split('.');
    const name = parts[0];
    const extension = parts[1];
    return new HtmlWebpackPlugin({
      filename: `${name}.html`,
      template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
      inject: false,
    })
  })
}

const htmlPlugins = generateHtmlPlugins('./src/html/views')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({}),
      new UglifyJsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 4200
  },
 
  
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',   
      template: './src/html/views/index.html',

    }),
    new HtmlWebpackPlugin({
      filename: 'header.html',
      template: './src/html/includes/header.html',
    }),
    
    new HtmlWebpackPlugin({
      filename: 'aside.html',
      template: './src/html/includes/aside.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ].concat(htmlPlugins),
  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
       {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.html$/,
        include: path.resolve(__dirname, 'src/html/includes'),
        use: ['raw-loader']
      },
      //  {
      //       test: /\.html$/, // tells webpack to use this loader for all ".html" files
      //       loader: 'html-loader'
      //   },
   //   {
        
        //test: /\.(png|jpe?g|gif)$/i,
      //  use: [
        //  {
         // loader:'file-loader',
         // options:{
         //   name:'[name].[ext]',
         //   outputPath:'./',
          //  useRelativePath:true
         //   }
        //  }
       // ]
     // },
      
     
      { 
        test: /\.(js|ts)$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      }
    ]
  }
}

package.json
<code lang="javascript">
{
  "name": "test",
  "version": "1.0.0",
  "description": "only for test from webformyself",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production --open"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Alexei",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "raw-loader": "^3.1.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "bootstrap": "^4.3.1",
    "canvas": "^2.6.0",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0"
  }
}

</code>