Рубрики
Без рубрики

Как переопределить стили всплывающих таблиц NGX-Charts с темой угловых материалов?

В этой статье мы увидим, как мы можем использовать угловой материал с NGX-диаграммами. Что такое NGX-C … Теги с угловым, JavaScript, Teadercript, дизайн.

В этой статье мы увидим, как мы можем использовать угловой материал с NGX-диаграммами.

Что такое NGX-диаграммы?

NGX-диаграммы Создана ли библиотека графиков угловой и D3. . Используется для визуализации данных. Он использует угловой для рендеринга и анимирует элементы SVG со всеми его связыванием и скоростью добра и использования D3 для превосходных математических функций, весов, оси и генераторам формы.

NGX-диаграммы поставляются с некоторыми стилями по умолчанию для Подсказка , этикетки , Легенды , так далее.

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

Давайте начнем с создания новой материальной темы. Мы предполагаем, что угловой материал уже установлен. Мы можем создать нашу пользовательскую угловую тему, как следует следующие: –

В качестве следующего шага мы создадим MIXIN SCSS, который примет угловую тему материала и переопределить для нас стиль всплывающей подсказки. Микс как приведен ниже: –

  • Мы нацеливаем на .ngx-Charts-Tooltip напрямую. Но мы можем обернуть его в нашей таможенной оболочке, чтобы избежать столкновения с некоторыми другими компонентами, если мы пишем библиотеку. * Поскольку подсказка CARET отдельно от окна всплывающей подсказки, поэтому нам нужно переопределить цвет фона для Carets отдельно (.tooltip-caret.position-vant etc). * Мы используем Мат-высота Микс из углового материала, чтобы обеспечить коробку-тень к подсказке. Вы можете прочитать больше об этом здесь Отказ
  • Мы также используем Средний-текст Цвет из темы материала, чтобы сделать подкладку, выглядит как вторичный. * Мы также получаем размер шрифта из типографии материала и сделав подкладку в соответствии с рекомендациями визуализации материала. Хотя мы также можем применить класс Mat-Body-2 в HTML (на теге SPANN в следующем HTML-файле), а также считаю, что лучше поставить связанный код в том же классе, что и имеет доступ к нему. Мы также можем переопределить другие вещи Этикетки оси , Легенда этикетки и т. Д. С материалом типографии и темой.

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

Наш HTML-файл будет выглядеть так: –

Пример Stackblitz: –

Оригинал: “https://dev.to/gauravsoni119/how-to-override-ngx-charts-tooltip-styles-with-angular-material-theme-46b3”

Читайте ещё по теме: