Проблема Использование Диаграммы.

kutuzlk · 18 Май 2024

Здравствуйте дорогие читатели и разработчики.
Такой вопросик нарисовалься, я сам не так давно в Front End разработке, и столкнулься с такой проблеммой.
Мне нужно вывести в блоке

HTML:

<div class="diagrama">
<canvas id="myChart"></canvas>
</div>

диаграмму.
С кодом в JS

Код:

let ctx = document.querySelector('#myChart').getContext('2d');
let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [100,200,300,400],
        datasets: [{
            label: 'Онлайн Сервера!',
            data: [1,2,3,4],
            backgroundColor: ['black'],
            borderColor: [
                '#80d8ff'
            ],
            borderWidth: 4
        }]
    },
    options: {}
})

Но по итогу в браузерке нету ничего, и консоль жалуеться
Кто мог бы помочь разобраться в этом. Буду сильно благодарен.

Jerry (ChatGPT) · 18 Май 2024

Привет! Проверьте, правильно ли подключен скрипт Chart.js перед вашим скриптом создания диаграммы. Необходимо убедиться, что библиотека Chart.js загружена перед тем, как будет инициализирован ваш код для создания диаграммы.

Inoi · 18 Май 2024

что такое new Chart
что такое chart.js
ты используешь импорт в среде, которая ожидает использования require, судя по первой ошибке

это код, написанный нейронкой?

kutuzlk · 18 Май 2024

Inoi написал(а):
что такое new Chart
что такое chart.js
ты используешь импорт в среде, которая ожидает использования require, судя по первой ошибке

это код, написанный нейронкой?

Ну тут

JavaScript:

let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [100,200,300,400],
        datasets: [{
            label: 'Онлайн Сервера!',
            data: [1,2,3,4],
            backgroundColor: ['black'],
            borderColor: [
                '#80d8ff'
            ],
            borderWidth: 4
        }]
    },
    options: {}
})

мы вызывем класс Chart которому в последующем задаем параметры которые написаные в низу.

Inoi · 18 Май 2024

kutuzlk написал(а):
Ну тут

JavaScript:

let myChart = new Chart(ctx, { type: 'line', data: { labels: [100,200,300,400], datasets: [{ label: 'Онлайн Сервера!', data: [1,2,3,4], backgroundColor: ['black'], borderColor: [ '#80d8ff' ], borderWidth: 4 }] }, options: {} })

мы вызывем класс Chart которому в последующем задаем параметры которые написаные в низу.

Класс не вызывают
Класс - это описание структуры некой образной модели

Ты его не "вызываешь", это не функция
Ты создаешь его новый экземпляр, там даже вон слово new есть
Хуй знает что там имела ввиду нейронка и что за chart, может это и функция-конструктор, жс по-своему немного работает с ооп (а я немного плаваю)

В любом случае смысл в том, что тебе нужен сам Chart, описанный, для того чтобы создавать его элемент

Если ты просишь нейронку писать за тебя такие вещи промптами типа "напиши мне код для вывода диаграммы онлайна на сайт" - стоит учитывать, что ты зачастую получишь залупу.
В том плане, что она выдаёт теоретическую реализацию. "Так он мог бы выглядеть, существуй у тебя какая-то подключенная библиотека Chart, которая реализует диаграммы, когда ты вызываешь её функцию-конструктор примерно с такими параметрами".
А у тебя её нихуя нет, ты вообще понятия не имеешь что это - равно как впрочем и она, и поэтому ты просто смотришь на эти буквы как баба Клава на пельмень.
Они и не работают, потому что и не должны.

Лучше сначала спросить её, как вообще можно выводить диаграммы на сайт, какие есть библиотеки, какие у них плюсы и минусы, как какие использовать, выбрать конкретную - и уже потом попросить под неё пример.

kutuzlk · 18 Май 2024

Inoi написал(а):
Класс не вызывают
Класс - это описание структуры некой образной модели

Ты его не "вызываешь", это не функция
Ты создаешь его новый экземпляр, там даже вон слово new есть
Хуй знает что там имела ввиду нейронка и что за chart, может это и функция-конструктор, жс по-своему немного работает с ооп (а я немного плаваю)

В любом случае смысл в том, что тебе нужен сам Chart, описанный, для того чтобы создавать его элемент

Если ты просишь нейронку писать за тебя такие вещи промптами типа "напиши мне код для вывода диаграммы онлайна на сайт" - стоит учитывать, что ты зачастую получишь залупу.
В том плане, что она выдаёт теоретическую реализацию. "Так он мог бы выглядеть, существуй у тебя какая-то подключенная библиотека Chart, которая реализует диаграммы, когда ты вызываешь её функцию-конструктор примерно с такими параметрами".
А у тебя её нихуя нет, ты вообще понятия не имеешь что это - равно как впрочем и она, и поэтому ты просто смотришь на эти буквы как баба Клава на пельмень.
Они и не работают, потому что и не должны.

Лучше сначала спросить её, как вообще можно выводить диаграммы на сайт, какие есть библиотеки, какие у них плюсы и минусы, как какие использовать, выбрать конкретную - и уже потом попросить под неё пример.

Спасибо большое за ответ, учту обезательно, ибо писал несколько разработчикам в дискорде этого форума. Никто не в курсе и никто не знает что и как.
В принципе исправил её, теперь она работает. Но немного не корректно.

Inoi · 18 Май 2024

чатжпт например говорит что Chart.js - это популярная библиотека для графиков и диаграмм, и возможно и в твоём случае она имела ввиду её - https://www.chartjs.org/
чтобы её использовать - её нужно подключить, через <script с сдна, например, или через npm install в твой проект
судя по примеру кода, который она мне под неё даёт - это как раз твой вариант и есть

тогда ты как минимум избавишься от ошибки

kutuzlk · 18 Май 2024

Inoi написал(а):
чатжпт например говорит что Chart.js - это популярная библиотека для графиков и диаграмм, и возможно и в твоём случае она имела ввиду её - https://www.chartjs.org/
чтобы её использовать - её нужно подключить, через <script с сдна, например, или через npm install в твой проект
судя по примеру кода, который она мне под неё даёт - это как раз твой вариант и есть

тогда ты как минимум избавишься от ошибки
Посмотреть вложение 14020

Да, проблема как оказалось была именно в ссылке кдн, ибо оно просто не подгружало её.

Проблема Использование Диаграммы.

kutuzlk

Участник портала

Jerry (ChatGPT)

AI-powered language model

Inoi

/dev/null

kutuzlk

Участник портала

Inoi

/dev/null

kutuzlk

Участник портала

Inoi

/dev/null

kutuzlk

Участник портала