我的 html 文件無法識別 javascript 文件或 javascript 插入的代碼

Question

我正在 angular 10 中開發儀表板，並且我正在使用 chart.js 構建一些圖表。 我的 dashboard.component.html 無法識別我的 javascript 文件。 我也試過使用標簽，直接在html文件中插入代碼，還是沒有。 我能做些什么？

我的文件：

 var IAP = document.getElementById('IAP').getContext('2d'); var IapChart = new Chart(IAP, { type:'bar', data={ labels:[ 'Aveiro', 'Beja', 'Braga', 'Bragança', 'Castelo Branco', 'Coimbra', 'Évora', 'Faro', 'Guarda', 'Leiria', 'Lisboa', 'Portalegre', 'Porto', 'Santarém', 'Setúbal', 'Viana do Castelo', 'Vila Real', 'Viseu'], datasets:[{ label:'IAP', data:[1.01, 1,20, 1,89, 1,99, 0,88, 1,23, 1,32, 1,67, 1,55, 0,77, 1,38, 1,66, 1,00, 1,11, 0,87, 1,45, 1,12 ] }] }, options:{}, });

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no. initial-scale=1,0. maximum-scale=1,0. minimum-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>DashBoard</title> </head> <body> <div class="container"> <canvas id="IAP"></canvas> </div> <script type="text/javascript" src="chart.js"></script> </body> </html>

Answer 1

發現代碼中有錯別字。 * data={* 是 object 鍵，因此您必須使用分號： data: { 。

這是工作片段：

 window.addEventListener('DOMContentLoaded', function() { var IAP = document.getElementById('IAP').getContext('2d'); var IapChart = new Chart(IAP, { type: 'bar', data: { labels: ['Aveiro', 'Beja', 'Braga', 'Bragança', 'Castelo Branco', 'Coimbra', 'Évora', 'Faro', 'Guarda', 'Leiria', 'Lisboa', 'Portalegre', 'Porto', 'Santarém', 'Setúbal', 'Viana do Castelo', 'Vila Real', 'Viseu' ], datasets: [{ label: 'IAP', data: [1.01, 1, 20, 1, 89, 1, 99, 0, 88, 1, 23, 1, 32, 1, 67, 1, 55, 0, 77, 1, 38, 1, 66, 1, 00, 1, 11, 0, 87, 1, 45, 1, 12 ] }] }, options: {}, }); });

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no. initial-scale=1,0. maximum-scale=1,0. minimum-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <title>DashBoard</title> </head> <body> <div class="container"> <canvas id="IAP"></canvas> </div> <script type="text/javascript" src="chart.js"></script> </body> </html>

希望能幫助到你：）

PS：我建議你結合使用eslint和Prettier來進行 linting 等等。

Answer 2

如果您使用的是 Angular，我建議您利用 npm 安裝 chart.js 庫並編寫一個處理圖表創建的組件。

這很簡單

npm install chart.js --save

ng g c barchart
import { Chart } from 'chart.js';
this.BarChart = new Chart('canvas', {
      type:'bar',
      data: {
        labels:[ 'Aveiro', 'Beja', 'Braga', 'Bragança', 'Castelo Branco', 'Coimbra', 'Évora', 'Faro', 'Guarda',
        'Leiria', 'Lisboa', 'Portalegre', 'Porto', 'Santarém', 'Setúbal', 'Viana do Castelo', 'Vila Real', 'Viseu'],
        datasets:[{
            label:'IAP',
            data:[1.01,
                  1,20,
                  1,89,
                  1,99,
                  0,88,
                  1,23,
                  1,32,
                  1,67,
                  1,55,
                  0,77,
                  1,38,
                  1,66,
                  1,00,
                  1,11,
                  0,87,
                  1,45,
                  1,12
                  ]
        }]
        },
      options:{},
    })

html 可以是這樣的 barchart.component.html

<div class="chart-container">    
  <canvas id="canvas">{{ BarChart }}</canvas>    
</div>

我建議這樣做，因為通常通過 npm 完成的庫導入將在構建步驟通過使用搖樹和其他捆綁器進行優化，而在索引中導入整個 chart.js 庫時無法實現搖樹。

希望這可以幫助：）

我的 html 文件無法識別 javascript 文件或 javascript 插入的代碼

問題描述

2 個解決方案

解決方案1
0 2020-07-09 09:05:45

解決方案2
0 已采納 2020-07-09 09:30:38

我的 html 文件無法識別 javascript 文件或 javascript 插入的代碼

問題描述

2 個解決方案

解決方案1 0 2020-07-09 09:05:45

解決方案2 0 已采納 2020-07-09 09:30:38

解決方案1
0 2020-07-09 09:05:45

解決方案2
0 已采納 2020-07-09 09:30:38