JavaScript решает 21. Графики Chart.js

Поделиться
HTML-код
  • Опубликовано: 16 окт 2024
  • Плейлист: goo.gl/hpmmzj
    Сайт: javascript.kiev.ua
    Телеграм: t.me/jsrules
    Файлы: github.com/lus...
    Учимся строить графики с помощью Chart.js

Комментарии • 86

  • @betsmagazine-7242
    @betsmagazine-7242 3 года назад +1

    а не могли бы рассказать более сложный пример - как при помощи этой библиотеки рисовать на сайте при клике на кнопке новые графики - в документации как-то непонятно написано и неясно тот ли этот момент - кликаем по кнопке randomise -линии меняются, но вот как это сделать - новичку непонятно

  • @betsmagazine-7242
    @betsmagazine-7242 3 года назад +3

    спасибо! будем разбираться, как раз дали тестовое с графиками))

  • @sevgenberg585
    @sevgenberg585 Год назад

    Скажите, как показать что показатель растет, например стрелочка зеленая вверх, показатель выводится со знаком +, или падает стрелочка красная вниз, показатель со знаком-.Как это можно реализовать, подскажите хотя бы где копать. несколько раз видел такое на сайтах криптобирж.

  • @KirillKlimov_lds
    @KirillKlimov_lds 6 лет назад +7

    Все прекрасно получилось. Жду следующего урока про биткойны!

    • @itgid
      @itgid  6 лет назад +1

      Завтра, а ваш комментарий предыдущий - исправили ошибку?

    • @donmacaron353
      @donmacaron353 5 лет назад +2

      @@itgid А был таки урок про графики криптовалют? Не могу нигде найти

    • @MrVertu01
      @MrVertu01 2 года назад

      @@donmacaron353 походу не было, тоже найти не могу

  • @ЛюсяРыбальченко-з3ш

    Привет. Может кто сталкивался с такой проблемой. Тупо не получается подключить библиотеку, а когда добавляю код настройки в js то вообще тупо перестает работать все что находится в js

  • @valeriygalev2933
    @valeriygalev2933 5 лет назад +3

    А можно на элемент графика (столбец) навешивать обработчик события, например чтобы по даблклику на нём открывалась карточка с информацией?

  • @yekaterinajalette9483
    @yekaterinajalette9483 5 лет назад +3

    Очень хорошо объясняете! Спасибо!

  • @elvinalishov2176
    @elvinalishov2176 4 года назад

    Добрый день а как добавить тень к кускам круглого графика при наведении мышю на куски

  • @Nagatt
    @Nagatt 6 лет назад +1

    Можете подсказать или видео скинуть,у меня диаграмма в виде пончика, есть такая проблема когда наводишь на определённый участок то показывается hover, как его отключить?

    • @itgid
      @itgid  6 лет назад

      легенду убрать нужно.

    • @Nagatt
      @Nagatt 6 лет назад

      Спасибо, это уже не проблема, как изменить hover на кастомный?

  • @mk3mk3mk
    @mk3mk3mk 5 лет назад

    Александр, здравствуйте! А где тот урок про графики криптовалют, про который Вы сказали, что завтра будет и оставите ссылку ? Что-то я не нашёл . Очень интересно посмотреть

  • @microodyssey
    @microodyssey 3 года назад +1

    Блиин, ты прямо вовремя меня выручил! Спасибо

  • @azelsky
    @azelsky 6 лет назад

    Доброго дня, де можна глянути про графік до криптовалюти?

  • @podbot4231
    @podbot4231 3 года назад

    Здравствуйте! Может быть вы знаете как на графике с двумя осями Y перенести одну из них направо? Ставлю осям position по id, и по yAxisID, все равно слева обе. Работаю с ChartJS V3.1.0

  • @DevALine
    @DevALine 5 лет назад

    Здравствуйте, возник вопрос возможно у вас как у разработчика с большим стажем он тоже когда-то возникал. Суть вопроса в следующем возможно ли у круговой диаграмы состоящей из 3 частей сделать отступы и скруглить внутренние грани. stackoverflow.com/questions/58080847/google-donut-chart

  • @heypeople8759
    @heypeople8759 6 лет назад +6

    А как сделать чтобы данные читались из файла?

  • @dmitryponyatov2158
    @dmitryponyatov2158 4 года назад

    а чем можно рисовать _графы_ с текстовыми метками? типа схем сетей, структур подчинененнения начальников, электрических и т.п.

    • @itgid
      @itgid  4 года назад

      canvas

  • @marytrampoline2763
    @marytrampoline2763 5 лет назад

    как правильно настроить размеры графика? что бы было например 300 на 200 ?

  • @donmacaron353
    @donmacaron353 5 лет назад

    А был таки урок про графики криптовалют? Не могу нигде найти

  • @kapotonai
    @kapotonai 6 лет назад +2

    document.getElementsById('square') = fun1; Выдает ошибку: 'Uncaught ReferenceError: Invalid left-hand side in assignment'
    Где я ошибся?

    • @itgid
      @itgid  6 лет назад +1

      в правой части выражения. В левой вы получаете элемент со страницы и пытаетесь ему присвоить какую-то странную переменную fun1. Что вы хотите получить?

    • @kapotonai
      @kapotonai 6 лет назад +2

      Хочу получить элемент с id='square' и присвоить ей функцию.Я видно запутался.Для меня это больной момент:когда и где создавать функцию.

    • @itgid
      @itgid  6 лет назад +1

      Тогда нужно написать так document.getElementById('square).onclick = fun1; Т.е. укажите событие, при котором должна происходить эта функция.

  • @alexandrameas4436
    @alexandrameas4436 5 лет назад

    а как быть, если надо последние 12 месяцев вывести на ось x?

  • @Transguddit
    @Transguddit 6 лет назад +3

    Кто подскажет, почему в js переменная с именем name - всегда строка??? Это какое то зарезервированное имя? Не смог ничего про это найти.

    • @itgid
      @itgid  6 лет назад

      А как вы получаете name?

    • @Transguddit
      @Transguddit 6 лет назад +1

      var name = 1;
      typeof name;
      "string"
      name = null;
      typeof name;
      "string"
      name = [];
      typeof name;
      "string"
      Если другое имя дать, например names - то всё работает правильно

    • @itgid
      @itgid  6 лет назад

      а в чем прикол? Да это строка!

    • @Transguddit
      @Transguddit 6 лет назад

      Так а почему это строка???
      var name = 1;
      typeof name;
      "string"
      var Name = 1;
      typeof Name;
      "number"

    • @itgid
      @itgid  6 лет назад

      а попробуйте поменять name на name1

  • @thisIsMine007
    @thisIsMine007 5 лет назад +1

    Здравствуйте. Подскажите как поменять размер диаграммы ?

    • @itgid
      @itgid  5 лет назад

      если вы имеете ввиду внешний размер, то CSS. Если внутренние элементы - то они рассчитываются автоматически на основе введенных данных.

  • @t.on.y
    @t.on.y 4 года назад

    В шоке, так просто.
    Мое почтение за видео.

  • @МихаилМакейчев-ш1к
    @МихаилМакейчев-ш1к 3 года назад

    Спасибо огромное ! На работе дали задачу , завтра реализую 👍👍👍👍👍👍👍👍👍👍👍👍

  • @maxsaCEO
    @maxsaCEO 6 лет назад +1

    Интересно узнать, как при типе графика Doughnut, значение label (например жирным 33%) поместить в середину "бублика"?

    • @itgid
      @itgid  6 лет назад

      А документации описан этот стиль?

    • @maxsaCEO
      @maxsaCEO 6 лет назад

      Да, здесь: www.chartjs.org/docs/latest/charts/doughnut.html

  • @andrejaga3003
    @andrejaga3003 2 года назад

    Мне кажется, это обманчивая легкость. Я хотел сказать, что есть подводные камни. Во-первых, приходится подключать библиотеку. Библиотеку желательно подключать в head страницы, т.е. пока она не загрузится, пользователь ничего не увидит. Во-вторых, библиотека сторонняя (хотя можно и себе перетащить). В свете последних событий, когда недобросовестные разработчики с запада просто на волне хайпа блокируют выдачу по территориальному признаку -- это жирный минус. Ну а в третьих, большинство диаграмм элементарно можно нарисовать таблицами, а лучше js+таблица, чтобы сократить код. И весить они будут совсем ничего.

  • @AidanaT829
    @AidanaT829 6 лет назад +1

    Помогите пожалуйста! У меня библиотека через ссылку не привязывается!

    • @itgid
      @itgid  6 лет назад +1

      Если вы с россии то у вас роскомнадзор блокирует хранилища, нужно качать библиотеку и подключать напрямую.

    • @AidanaT829
      @AidanaT829 6 лет назад

      JavaScript решает я из Казахстана;(

    • @itgid
      @itgid  6 лет назад +1

      А я из Украины. А при перекрытии каналов ищут обходные пути, в результате трафик возрастает и доступ к ресурсам замедляется. Это как из вариантов, а если можно выгрузите код на codepen посмотрю.

    • @AidanaT829
      @AidanaT829 6 лет назад

      JavaScript решает Спасибо Большое, что отвечаете!!!! Если смогу- выгружу. Пишу на с Uikit и vue js, но они не причём, да?

    • @AidanaT829
      @AidanaT829 6 лет назад

      codepen.io/khassenovaainur/pen/rKoXJq посмотрите пожалуйста))

  • @KuKu_RuKu88
    @KuKu_RuKu88 4 года назад

    Класс. Спасибо за урок

  • @АркадийМоисеев-ы7б
    @АркадийМоисеев-ы7б 6 лет назад +2

    Классное видео! А не могли бы вы записать урок как строить графики используя данные из базы данных?

    • @itgid
      @itgid  6 лет назад +2

      Каких баз данных, какой бекенд?

    • @АркадийМоисеев-ы7б
      @АркадийМоисеев-ы7б 6 лет назад

      Да ну взять к примеру SQL, или например как вытащить те же данные из обычного блокнота.
      Я новичок в этом всем... по этому прошу прощения если мои вопросы окажутся глупыми)))))

    • @ИванИванов-э8й5й
      @ИванИванов-э8й5й 5 лет назад

      @@АркадийМоисеев-ы7б привет, каковы успехи сейчас?

  • @kirillcherkalov2444
    @kirillcherkalov2444 6 лет назад +2

    Как на счёт , чтобы сделать задачки про граф?)

    • @itgid
      @itgid  6 лет назад

      Сделаю, всему свое время. Просто не успеваю все.

    • @kirillcherkalov2444
      @kirillcherkalov2444 6 лет назад

      Front-End разработка с нуля. HTML, CSS, jQuery Понял, буду ждать)

  • @elizabethgrant6018
    @elizabethgrant6018 4 года назад

    Спасибо огромное, очень помогли!

  • @k-volodymyr
    @k-volodymyr 6 лет назад +3

    *СУПЕР!!!*

  • @Dmitriy_Sentinel
    @Dmitriy_Sentinel 3 года назад

    Кстати, если делать подобное на React.js

  • @serdarhuseynov8901
    @serdarhuseynov8901 Год назад

    я сделал все получилось спасибо автору осталось научиться как убрать фоновые линии и цифры по бокам

  • @andreinechaev7214
    @andreinechaev7214 6 лет назад +1

    У меня этот чарт не поддерживает русские буквы - в подписях к графику аккуратные рядки из ромбиков)

    • @itgid
      @itgid  6 лет назад

      А какая кодировка и браузер?

    • @andreinechaev7214
      @andreinechaev7214 6 лет назад +1

      Браузер хром в виндоус10. Набирал в редакторе ноутпад++. Когда перешел на Брэкетс эта проблема исчезла.

  • @vadimlukin3173
    @vadimlukin3173 6 лет назад +2

    Добрый день. Смотрю с большим удовольствием ваши уроки по JS, думал что никогда не найду тех людей,которые не только просто что то говорят про JS но и объясняют.Не могли бы вы сделать также курс jQuery для начинающих?

  • @ДмитрийХолост-ь5у
    @ДмитрийХолост-ь5у 6 лет назад

    очень классно )

  • @i-holzi7332
    @i-holzi7332 6 лет назад

    СУППЕР!

  • @antina34
    @antina34 4 года назад +1

    интересно было бы посмотреть на d3 js

  • @vmakushchenko2044
    @vmakushchenko2044 3 года назад

    лайк

  • @pwal1969
    @pwal1969 5 лет назад

    Только не работает нечего с примеров, от слова совсем

  • @ДмитрийХолост-ь5у
    @ДмитрийХолост-ь5у 6 лет назад +3

    какая блин ссылочка в низу , я его уже 3 раза посмотрел )

    • @itgid
      @itgid  6 лет назад

      Дмитрий Холост что вы имеете ввиду?

    • @ДмитрийХолост-ь5у
      @ДмитрийХолост-ь5у 6 лет назад

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

    • @yuriiserdiuk3918
      @yuriiserdiuk3918 5 лет назад

  • @TheMrDemage
    @TheMrDemage 4 года назад

    не работает

  • @vladislavdev8890
    @vladislavdev8890 5 лет назад +1

    Спасибо кл=ассно обьяснил незная js понял

  • @alexUnion
    @alexUnion 6 лет назад

    Для кого это видео? Смотрел с рукой на лице...вот эта надпись...цитирование документации...

    • @itgid
      @itgid  6 лет назад

      Зачем же так мучатся. Поставьте анлайк и идите мимо.

  • @СергейПожилов-ъ2м
    @СергейПожилов-ъ2м 5 лет назад

    вот либа получше plot.ly/javascript/