Category: Frontend

03
Июл
2020

Параллакс на реакт

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

03
Июл
2020

Онлайн: обучение фронтенду с оплатой после трудоустройства

Изучите всё, необходимое фронтенд-разработчику: HTML, CSS, JS, а также React в связке с Redux. Ничего платить не придётся, пока не найдёте работу в Москве.
— Читать дальше «Обучение фронтенду с оплатой после трудоустройства»

27
Июн
2020

Как сократить код, где много разных обработчиков событий, но одна функция-листенер?

Модальное окно можна закрыть (modalClose()) 4 разными способами: нажав на крестик (modalCloseIco), нажав на кнопку с надписью "Закрыть" (modalCloseBtn), нажав на фон модального окна (modalBackground) и нажав кнопку Escape.
modalC…

23
Июн
2020

⚛️ 12 бесплатных ресурсов для изучения React

React – одна из самых популярных JavaScript-библиотек для разработки пользовательских интерфейсов. В этой статье вы найдете подборку бесплатных ресурсов о React: открытые курсы, подкасты, ёмкие конспекты и плейлисты YouTube.

11
Июн
2020

⏳ 10 способов ускорить загрузку вашего сайта

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

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

1. Используйте CDN

CDN (Content Delivery Network) – географически распределённая сетевая инфраструктура, которая оптимизирует доставку контента конечным пользователям, давая доступ к сотням серверов по всему миру, размещающих копию
вашего сайта.

Если вы уже используете CDN, проверьте,
правильно ли вы настроили кэширование. Проблемы с кэшем могут привести к тому,
что CDN будет запрашивать ресурс у вашего сервера, а это противоречит
цели использования этой инфраструктуры.

2. Включите gzip-сжатие

В некоторых CDN gzip-сжатие можно включить флажком Enable
compression
. Сжатие файлов обеспечит более быструю загрузку контента пользователями сайта.

3. Используйте оптимизацию изображений

Уменьшайте все изображения, которые не потеряют в качестве и не будут масштабироваться
Уменьшайте все изображения, которые не потеряют в качестве и не будут масштабироваться

Распространённая причина долгой загрузки страниц – избыточное качество изображений или выбор неподходящего формата. Можно уменьшить количество пикселей по каждой из сторон и применить сжатие изображений. Прогресс не стоит на месте – обратите внимание на формат сжатия изображений WebP.

Если у вас сайт на WordPress, можно использовать плагины, которые уменьшат размер автоматически в процессе загрузки.

4. Уменьшите количество
запросов, совершаемых страницей

Сократите число запросов, необходимых для загрузки верхней части страницы. Есть два способа:

  • уменьшить количество запросов, удалив то, что не влияет на работу сайта;
  • отложить загрузку низкоприоритетного контента, используя функцию ленивой загрузки.

5. Избегайте
перенаправлений


Редиректы значительно
замедляют работу сайта. Чтобы не держать специальный поддомен для
мобильных пользователей, используйте адаптивный CSS.

Некоторые редиректы
неизбежны, например, www -> root domain или root domain -> www, но
основная часть трафика не должна поступать через перенаправления.

6. Сократите время до первого байта

Время до первого байта (TTFB) –
это время, которое браузер тратит на ожидание данных с сервера после отправки запроса на ресурс.

На этот показатель влияют два параметра:

  1. Время, потраченное на сервере.
  2. Время, потраченное на отправку данных.

Первый параметр можно уменьшить, оптимизировав работу на стороне сервера: запросы к базам данных, вызовы API, балансировку нагрузки и т. д..

О втором параметре мы уже поговорили – на него мы можем повлиять, используя CDN.

7. Решите вопрос блокировки рендеринга JavaScript

Внешние скрипты часто блокируют загрузку страницы до
тех пор, пока не выполнятся
сами. Этот эффект можно смягчить, пометив внешние скрипты директивой async:

        https://example.com/external.js
    

Можно отложить
загрузку сценариев до тех пор, пока пользователь не начнёт совершать
активные действия:

        window.addEventListener(
  'scroll',
  () =>
    setTimeout(() => {
      //insert marketing snippets here
    }, 1000),
  { once: true }
);
    

8. Минимизируйте CSS и JavaScript


Минимизация подразумевает
использование инструментов для удаления пробелов, символов перевода строки и
сокращения длины имён переменных. Как правило, это делается автоматически в рамках
процесса сборки. Есть специальные инструменты: например,
UglifyJS для JavaScript или cssnano для CSS.

9. Удалите
неиспользуемый код CSS и JavaScript

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

Начиная с Chrome 59, в Chrome DevTools
можно анализировать использование JavaScript и CSS.
Для этого откройте DevTools, перейдите во вкладку Console, нажмите на три точки и
откройте Coverage. При нажатии кнопки со значком перезагрузки будет проведен аудит использования CSS и JavaScript. Помеченные красным блоки кода загружаются, но не используются.

Аудит использования CSS и JS
Аудит использования CSS и JS
Примечание
Об использовании средств DevTools для ускорения загрузки сайта читайте в нашем подробном мануале «Ускоряем загрузку сайта с помощью Chrome DevTools».

10. Регулярно
отслеживайте скорость загрузки сайта

Если вы возьмете за
правило обращать внимание на проверку скорости загрузки, это станет гораздо меньшей проблемой.

Есть бесплатные
инструменты для мониторинга скорости, например,
WebPageTest и Google Lighthouse. Но нужно не забывать запускать их до и после внесения изменений. Для автоматизации запуска GoogleLighthouse можно использовать PerfBeacon.

Заключение

Несомненно, скорость
сайта – важный параметр. Важно следить за этим показателем и вносить по мере необходимости изменения в структуру веб-проекта.
Но кроме скорости сайта поисковые системы оценивает полезность контента – в погоне за улучшением производительности сайта не забывайте о его наполнении.

Другие материалы по теме

02
Июн
2020

Slowscroll page

как сделать такой же плавный скроллинг как на этом сайте,и чтобы он сохранил свою плавность на телефоне
сайт: https://rluijten.photography/

01
Июн
2020

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

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

31
Май
2020

Здравствуйте, нужно чтобы выглядело как на скриншоте снизу. (проблема с иконками и с исчезновением блоков)

$(function(){
$(‘.faq__quest’).click(function(e) {
$(‘.faq__quest’).not(this).next().removeClass(‘show’).slideUp(550);
$(this).next().toggleClass(‘show’).slideToggle(550, function(){
$(‘.faq__quest’).toggleClass(“bgi”);

16
Май
2020

Как динамически сгенерировать и вставить на страницу большое количество DOM элементов?

Нужно в корневой элемент(#root) вставить очень большое количество цветных блоков(40тыс+). Пробовал вставлять фрагментами по 1000 через setTimeout(), но все равно зраузер виснет после 2-3к элементов

15
Май
2020

26 мая – 29 июля, онлайн: курс «JavaScript. Профессиональная разработка веб-интерфейсов»

Изучите современные возможности JavaScript для клиентской разработки и получите все необходимые знания и готовый проект для трудоустройства.
— Читать дальше «Курс «JavaScript. Профессиональная разработка веб-интерфейсов»»

14
Май
2020

Как задать подобного типа валидацию input?

**Здравствуйте, помогите, пожалуйста, с выбором типа валидации для input. Желательно чистый js или того лучше какой-нибудь jquery плагин.

При клике на кнопку с пустым инпутом должна сработать валидация как указана на рисунке. И еще, вне ч…

11
Май
2020

📸 Как сделать галерею в стиле Instagram

Галереи картинок с горизонтальной прокруткой выглядят современно и узнаваемо. Рассказываем, как с помощью CSS и JS перенести знакомую пользователям механику в ваши веб-приложения.

В этой статье мы реализуем два типа горизонтальных списков и галерею. Вначале в теоретической части опишем, какое поведение элементов интерфейса хотим получить. В практической части рассмотрим, как воплотить необходимую механику в CSS и JavaScript.

Теория: горизонтальные списки и галерея

Приведённая ниже анимация иллюстрирует горизонтальный список со свободным скроллингом. Структуру можно свободно прокручивать влево и вправо. Список можно слегка оттягивать на крайних элементах. Это даёт подсказку пользователю о границах объекта.

Горизонтальный список со свободной прокруткой (free-scrolling horizontal lists)
Горизонтальный список со свободной прокруткой (free-scrolling horizontal lists)

Горизонтальный список со снэппингом – почти то же самое, но текущий элемент списка при тапе заменяется на следующий.

Горизонтальный список со снэппингом (snapping horizontal lists)
Горизонтальный список со снэппингом (snapping horizontal lists)

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

Третий рассматриваемый элемент – галерея. Она похожа на snapping-списки, но каждый элемент занимает всё поле, как в обычном посте Instagram из нескольких фотографий. Под картинками расположен ряд точек – по одной для каждого изображения. Пользователю понятно, что есть другие изображения и какое из них видно в данный момент.

Пример галереи
Пример галереи

Практическая часть

1. Горизонтальные списки со свободной прокруткой

Для горизонтального списка используем flexbox, которому разрешим горизонтальный скроллинг. Размер элементов списка
укажем явно, как и зазор между ними. Поля установим бо́льшими, чем зазор, чтобы видеть, когда мы докрутили до начала или конца списка.

            .list {
  display: flex;
  padding: 20px;
  overflow-x: scroll;
}

.item {
  height: 224px;
  width: 125px;
  flex-shrink: 0;
}

.item:not(:last-child) { margin-right: 10px; }
        

Интерактивное представление и полный код доступны в в
сэндбоксе:


Работает, но
можно улучшить.

Поведение при прокрутке влево. В некоторых браузерах свайп влево повторяет действие кнопки «Назад». Такое поведение можно предотвратить, установив для overscroll-behavior значение contain.

Полосу прокрутки можно скрыть, установив overflow-x в auto. Однако при скроллинге полоса вновь появится. Чтобы скрыть полностью, можно установить scrollbar-width в none. На момент написания статьи это работало только в Firefox. Для других браузеров придется добавить трюкачества в CSS:

            .list { -ms-overflow-style: none; }
.list::-webkit-scrollbar { display: none; }
        

Плавная прокрутка. В iOS не хватает
стандартной плавной прокрутки (momentum scrolling). Потребуется добавить -webkit-overflow-scrolling:
touch;
.

Предотвращение
вертикальной прокрутки
. Мы можем прокручивать
страницу по вертикали. Эту возможность лучше
отключить для пользователей мобильных устройств, добавив к списку touch-action:
pan-x
. Однако если список покрывает всю видимую область просмотра, а на странице есть что-то ещё, эти элементы станут недоступны. То есть такой вариант надо использовать с осторожностью.

В результате наших преобразований соответствующая часть CSS теперь будет иметь следующий вид:

            .list {
  display: flex;
  overflow-x: scroll;
  padding: 20px;

  /* Предотвращает случайное использование "Назад"*/
  overscroll-behavior: contain;

  /* Скрывает полосу прокрутки */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Плавная прокрутка на iOS */
  -webkit-overflow-scrolling: touch;

  /* Отключает вертикальный скроллинг для тач-устройств */
  touch-action: pan-x;
}

/* Скрывает полосу прокрутки  */
.list::-webkit-scrollbar {
  display: none;
}

.item {
  height: 224px;
  width: 125px;
  flex-shrink: 0;
}

.item:not(:last-child) {
  margin-right: 10px;
}

/* фикс для отступов в конце списка */
.item:last-child {
  position: relative;
}

.item:last-child::after {
  position: absolute;
  left: 100%;
  height: 1px;
  width: 20px;
  display: block;
  content: "";
}

        

А результат выглядит вот так (там же полный код примера):


2. Горизонтальный список со снэппингом

Для описания этого типа списков отталкиваемся от списка со свободной прокруткой. Сначала сообщаем списку, когда нужно останавливаться:

            .list {
  scroll-snap-type: x mandatory;
}
        

Элементам списка добавляем опцию scroll-snap-align: start. Чтобы дать подсказку, следующий элемент может немного «выглядывать» из-за края экрана. Для этого достаточно установить отступ прокрутки: scroll-padding-inline-start:
20px
. Если хочется свайпнуть
одним движением несколько элементов,
можно добавить scroll-snap-stop: always к элементам списка, но не все браузеры пока
такое поддерживают.

Код полностью также выложен на Codesandbox:


3. Галерея в стиле Instagram

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


Но как мы поясняли в теоретической части, эти маленькие точки – полезный графический приём. Получается, что нам нужно следить за тем, какой из элементов списка сейчас виден. Наиболее простой способ – использовать IntersectionObserver.

Составим список
точек, каждая из которых соответствует одной из картинок. Когда она пролистывается в списке, мы получаем индекс элемента и устанавливаем
индикаторную точку с соответствующим индексом в активное положение.

Вот как это будет
выглядеть:

            // ссылки на элементы DOM
const list = document.querySelector('.list');
const items = Array.from(document.querySelectorAll('.item'));
const indicators = Array.from(document.querySelectorAll('.indicator'));

// создание наблюдателя
const observer = new IntersectionObserver(onIntersectionObserved, {
  root: list,
  threshold: 0.6
});

// наблюдаем за каждым элементом
items.forEach(item => {
  observer.observe(item);
});

// когда observer обнаруживает изменение записи
// (пункт, входящий в список)
// и эта запись пересекается,
// получаем индекс пересекающегося элемента
// устанавливаем нужный индикатор в активное положение
function onIntersectionObserved(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const intersectingIndex = items.indexOf(entry.target);
      activateIndicator(intersectingIndex);
    }
  });
}

function activateIndicator(index) {
  indicators.forEach((indicator, i) => {
    indicator.classList.toggle('active', i === index);
  });
}
        

Полный результат также доступен в сэндбоксе:


Примечание
Мы установили пороговое значение 0.6. То есть если 60% элемента находится в поле зрения, то мы считаем его «пересекающимся». Если установим значение равным 1, то пересекаемым будет считать только полностью видимый элемент.

Заключение

Мы разобрали несколько
вариаций построения горизонтальных списков изображений. У приведённых решений есть и свои недостатки, и преимущества. Поскольку используется нативная
прокрутка, нет возможности настроить способ движения, мы не можем
контролировать «липкость» ползунка (в этом случае правильнее было бы использовать решение на
JavaScript). Кроме того, в нашем решении мы использовали не самые стандартные подходы в CSS. Однако объём кода невелик, и он работает даже в старых браузерах.

11
Май
2020

Как сделать галерею в стиле Instagram

Галереи картинок с горизонтальной прокруткой выглядят современно и узнаваемо. Рассказываем, как с помощью CSS и JS перенести знакомую пользователям механику в ваши веб-приложения.

В этой статье мы реализуем два типа горизонтальных списков и галерею. Вначале в теоретической части опишем, какое поведение элементов интерфейса хотим получить. В практической части рассмотрим, как воплотить необходимую механику в CSS и JavaScript.

Теория: горизонтальные списки и галерея

Приведённая ниже анимация иллюстрирует горизонтальный список со свободным скроллингом. Структуру можно свободно прокручивать влево и вправо. Список можно слегка оттягивать на крайних элементах. Это даёт подсказку пользователю о границах объекта.

Горизонтальный список со свободной прокруткой (free-scrolling horizontal lists)
Горизонтальный список со свободной прокруткой (free-scrolling horizontal lists)

Горизонтальный список со снэппингом – почти то же самое, но текущий элемент списка при тапе заменяется на следующий.

Горизонтальный список со снэппингом (snapping horizontal lists)
Горизонтальный список со снэппингом (snapping horizontal lists)

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

Третий рассматриваемый элемент – галерея. Она похожа на snapping-списки, но каждый элемент занимает всё поле, как в обычном посте Instagram из нескольких фотографий. Под картинками расположен ряд точек – по одной для каждого изображения. Пользователю понятно, что есть другие изображения и какое из них видно в данный момент.

Пример галереи
Пример галереи

Практическая часть

1. Горизонтальные списки со свободной прокруткой

Для горизонтального списка используем flexbox, которому разрешим горизонтальный скроллинг. Размер элементов списка
укажем явно, как и зазор между ними. Поля установим бо́льшими, чем зазор, чтобы видеть, когда мы докрутили до начала или конца списка.

            .list {
  display: flex;
  padding: 20px;
  overflow-x: scroll;
}

.item {
  height: 224px;
  width: 125px;
  flex-shrink: 0;
}

.item:not(:last-child) { margin-right: 10px; }
        

Интерактивное представление и полный код доступны в в
сэндбоксе:


Работает, но
можно улучшить.

Поведение при прокрутке влево. В некоторых браузерах свайп влево повторяет действие кнопки «Назад». Такое поведение можно предотвратить, установив для overscroll-behavior значение contain.

Полосу прокрутки можно скрыть, установив overflow-x в auto. Однако при скроллинге полоса вновь появится. Чтобы скрыть полностью, можно установить scrollbar-width в none. На момент написания статьи это работало только в Firefox. Для других браузеров придется добавить трюкачества в CSS:

            .list { -ms-overflow-style: none; }
.list::-webkit-scrollbar { display: none; }
        

Плавная прокрутка. В iOS не хватает
стандартной плавной прокрутки (momentum scrolling). Потребуется добавить -webkit-overflow-scrolling:
touch;
.

Предотвращение
вертикальной прокрутки
. Мы можем прокручивать
страницу по вертикали. Эту возможность лучше
отключить для пользователей мобильных устройств, добавив к списку touch-action:
pan-x
. Однако если список покрывает всю видимую область просмотра, а на странице есть что-то ещё, эти элементы станут недоступны. То есть такой вариант надо использовать с осторожностью.

В результате наших преобразований соответствующая часть CSS теперь будет иметь следующий вид:

            .list {
  display: flex;
  overflow-x: scroll;
  padding: 20px;

  /* Предотвращает случайное использование "Назад"*/
  overscroll-behavior: contain;

  /* Скрывает полосу прокрутки */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Плавная прокрутка на iOS */
  -webkit-overflow-scrolling: touch;

  /* Отключает вертикальный скроллинг для тач-устройств */
  touch-action: pan-x;
}

/* Скрывает полосу прокрутки  */
.list::-webkit-scrollbar {
  display: none;
}

.item {
  height: 224px;
  width: 125px;
  flex-shrink: 0;
}

.item:not(:last-child) {
  margin-right: 10px;
}

/* фикс для отступов в конце списка */
.item:last-child {
  position: relative;
}

.item:last-child::after {
  position: absolute;
  left: 100%;
  height: 1px;
  width: 20px;
  display: block;
  content: "";
}

        

А результат выглядит вот так (там же полный код примера):


2. Горизонтальный список со снэппингом

Для описания этого типа списков отталкиваемся от списка со свободной прокруткой. Сначала сообщаем списку, когда нужно останавливаться:

            .list {
  scroll-snap-type: x mandatory;
}
        

Элементам списка добавляем опцию scroll-snap-align: start. Чтобы дать подсказку, следующий элемент может немного «выглядывать» из-за края экрана. Для этого достаточно установить отступ прокрутки: scroll-padding-inline-start:
20px
. Если хочется свайпнуть
одним движением несколько элементов,
можно добавить scroll-snap-stop: always к элементам списка, но не все браузеры пока
такое поддерживают.

Код полностью также выложен на Codesandbox:


3. Галерея в стиле Instagram

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


Но как мы поясняли в теоретической части, эти маленькие точки – полезный графический приём. Получается, что нам нужно следить за тем, какой из элементов списка сейчас виден. Наиболее простой способ – использовать IntersectionObserver.

Составим список
точек, каждая из которых соответствует одной из картинок. Когда она пролистывается в списке, мы получаем индекс элемента и устанавливаем
индикаторную точку с соответствующим индексом в активное положение.

Вот как это будет
выглядеть:

            // ссылки на элементы DOM
const list = document.querySelector('.list');
const items = Array.from(document.querySelectorAll('.item'));
const indicators = Array.from(document.querySelectorAll('.indicator'));

// создание наблюдателя
const observer = new IntersectionObserver(onIntersectionObserved, {
  root: list,
  threshold: 0.6
});

// наблюдаем за каждым элементом
items.forEach(item => {
  observer.observe(item);
});

// когда observer обнаруживает изменение записи
// (пункт, входящий в список)
// и эта запись пересекается,
// получаем индекс пересекающегося элемента
// устанавливаем нужный индикатор в активное положение
function onIntersectionObserved(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const intersectingIndex = items.indexOf(entry.target);
      activateIndicator(intersectingIndex);
    }
  });
}

function activateIndicator(index) {
  indicators.forEach((indicator, i) => {
    indicator.classList.toggle('active', i === index);
  });
}
        

Полный результат также доступен в сэндбоксе:


Примечание
Мы установили пороговое значение 0.6. То есть если 60% элемента находится в поле зрения, то мы считаем его «пересекающимся». Если установим значение равным 1, то пересекаемым будет считать только полностью видимый элемент.

Заключение

Мы разобрали несколько
вариаций построения горизонтальных списков изображений. У приведённых решений есть и свои недостатки, и преимущества. Поскольку используется нативная
прокрутка, нет возможности настроить способ движения, мы не можем
контролировать «липкость» ползунка (в этом случае правильнее было бы использовать решение на
JavaScript). Кроме того, в нашем решении мы использовали не самые стандартные подходы в CSS. Однако объём кода невелик, и он работает даже в старых браузерах.

11
Май
2020

Объясните, пожалуйста, за счет какой функции реализуются подобное

**Объясните, пожалуйста, за счет какой функции реализуются подобное (желательно js / jquery) с учетом активного состояния кнопки “Доставка” по умолчанию? Т.е. пока активна кнопка “Доставка” должен отображать первый вариант макета, в ин…

07
Май
2020

Почему не работает регулярное выражение /[–-А]/?

Я писал регулярное выражение, которое находит в строке символ, который является: длинным тире (–), обычным тире (-), или буквой ‘А’.

Получился RegExp: /[–-А]/, но при его создании вылезает ошибка:

Uncaught SyntaxError: Invalid regular ex…

04
Май
2020

HTML | Как оставлять фокус на элементе input при вводе символов с кнопок которые сделал сам

Есть калькулятор, когда ввожу в него числа с клавиатуры, фокусировка следует за символами, а когда я ввожу числа с кнопок <div>Вводимая Цифра</div> у меня фокус не следует за вводимыми пользователем символами, и из-за этого у м…

03
Май
2020

70 YouTube-каналов для фронтенд-разработчика

Подборка YouTube-каналов, плейлистов и подкастов, посвящённых фронтенду: вёрстка, JS, библиотеки и фреймворки, уроки и скринкасты, доклады на конференциях и записи встреч локальных сообществ. Приятного просмотра!

30
Апр
2020

22–25 мая, онлайн: конференция «Стачка-2020»

Более 200 докладов в 30 разных секциях. Всего 6 крупных направлений: разработка, диджитал, карьера и образование, тренды, менеджмент и IT и государство.
— Читать дальше «Конференция «Стачка-2020»»

29
Апр
2020

Перевернуть ось Y в Hightcharts

Использую Highcharts. У меня есть ось Y с рейтингом и ось X с датами. Я хочу перевернуть ось Y, и в этом мне призван помочь параметр:

yAxis: {
reversed: true
}

Но у меня, помимо прочего, есть fillColor, который тоже переворачивается…