Мой html файл не распознает javascript файлы или javascript вставленный код - PullRequest
Новая
       1

Мой html файл не распознает javascript файлы или javascript вставленный код

0 голосов
/ 09 июля 2020

Я разрабатываю панель инструментов в angular 10, и я использую диаграмму. js для построения некоторых диаграмм. my 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>

Ответы [ 2 ]

0 голосов
/ 09 июля 2020

Если вы используете Angular, я бы посоветовал вам воспользоваться npm для установки библиотеки диаграммы. 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 будут оптимизированы на этапе сборки с помощью встряхивания дерева и других сборщиков, в то время как встряхивание дерева невозможно при импорте всей диаграммы. js библиотека в вашем индексе. html.

Надеюсь, это поможет :)

0 голосов
/ 09 июля 2020

Обнаружена опечатка в коде. * data = {* - это ключ объекта, поэтому вы должны использовать точку с запятой: 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 для линтинга и многого другого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...