Не понимаю, как запустить chart.js?

Question

Алексей @Evelate

Не понимаю, как запустить chart.js?

Использую node для своего проекта. Понадобилось использовать графики.

Я скачал пакет chart.js с npm

Нашёл код для js

var Chart = require('chart.js');
var myChart = new Chart(ctx, {...});

Но сколько не находил примеров, не могу понять какой полный код нужно написать для html странички. Везде урезанные куски с canvas, но у меня не получается запустить. Подскажите, код) скорей всего что-то банальное упускаю.

Вопрос задан более трёх лет назад
772 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

Алексей @Evelate Автор вопроса

Вот мой html, что в нем не так, что-то не пойму. Пытаюсь подключить и внешний js файл и внутри, но ни один не работает

html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
<script src="..\tennis_pars_fast\test.js"></script>
<script src="C:\Users\evelate\Desktop\Training\node_modules\chart.js\dist\Chart.js"></script>

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

<canvas id="myChart" width="400" height="400"></canvas>


</head>
<body>



</body>
</html>

js

"use strict"



var Chart = require('Chart.js');



var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Redy", "Bluey", "Yellowy", "Greeny", "Purpley", "Orangey"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Написано более трёх лет назад

Alfieros @mrsexy
Алексей, давайте разбираться по порядку, как правильно это должно подключаться и где и как вызываться.
1) Если вы находитесь в папке с проектом "Training" и там же лежит директория node_modules , вы должны были подключить библиотеку скрипта таким образом:
<script src="./node_modules/chart.js/dist/Chart.js></script> - это мы подключаем перед закрытием тега</head>

2)
<script src="..\tennis_pars_fast\test.js"></script>
- это неправильное подключение. Вы запрашиваете файл вне проекта с рабочего стола в папке tennis_pars_fast, которая должна лежать внутри вашего проекта, и желательно все подключаемые скрипты складывать в 1 папочку, назовём её js, где и должны лежать все подключаемые скрипты.
Опишу пути обращения к файлам:
"./" - данное условие ищет файл или папку в текущей директории, где сейчас лежит файл в котором мы это записываем. Например: Мы положили в корневой каталог скрипт и нам его нужно вызвать. Пишем тогда так - "./scripts.js"
Если нам нужна другая директория, которая находится выше в иерархии, тогда мы записываем так "../" - "../js/scripts.js"
3) Данную функцию лучше вызывать перед закрытием тега </body>, обратите внимание, где это подключается. Как и любой другой скрипт, который нужно инициализировать на странице при загрузке. Лучше конечно всё это дело помещать в какой-нибудь "custom.js" , что будет лучшим и верным решением для сохранения чистоты вашего кода.
<script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> </body> </html>
Написано более трёх лет назад
Alfieros @mrsexy

Разжевал лучше некуда, копируйте и вставляйте в свой проект.
snippet

Написано более трёх лет назад
Алексей @Evelate Автор вопроса

Спасибо. С подключением скрипта лохонулся, печально...

Написано более трёх лет назад