Как отформатировать цвета меток осей X и Y в линейном графике ngx-диаграмм

Я использую ngx-диаграммы для построения данных временных рядов.

Я использую их пример

<ngx-charts-line-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
    </ngx-charts-line-chart>

У него есть опция цветовой схемы, но это только меняет цвет линии и соответствующих доменов.

Есть еще один вариант xAxisTickFormatting и yAxisTickFormatting, но я не уверен, как его использовать

Я хочу, чтобы цвет меток по осям X и Y был похож на этот пример https://swimlane.github.io/ngx-charts/

Источник

2 ответа

Если у вас темный фон в вашем приложении и вы хотите использовать светлые цвета для своих диаграмм ngx, вы можете использовать этот метод. Он будет использовать официальный код для темной темы ngx и отображать светлые цвета для меток диаграмм. Вы также можете изменить цветовой код в переменных sccss, и все будет работать так, как вам нужно.

Решил, как на официальном сайте. В файле SCSS приложения для стилей добавьте следующие стили:

.dark {
  /**
     * Backgrounds
     */
  $color-bg-darkest: #13141b;
  $color-bg-darker: #1b1e27;
  $color-bg-dark: #232837;
  $color-bg-med: #2f3646;
  $color-bg-light: #455066;
  $color-bg-lighter: #5b6882;

  /**
     * Text
     */
  $color-text-dark: #72809b;
  $color-text-med-dark: #919db5;
  $color-text-med: #A0AABE;
  $color-text-med-light: #d9dce1;
  $color-text-light: #f0f1f6;
  $color-text-lighter: #fff;

  background: $color-bg-darker;

  .ngx-charts {

    text {
      fill: $color-text-med;
    }

    .tooltip-anchor {
      fill: rgb(255, 255, 255);
    }

    .gridline-path {
      stroke: $color-bg-med;
    }

    .refline-path {
      stroke: $color-bg-light;
    }

    .reference-area {
      fill: #fff;
    }

    .grid-panel {
      &.odd {
        rect {
          fill: rgba(255, 255, 255, 0.05);
        }
      }
    }

    .force-directed-graph {
      .edge {
        stroke: $color-bg-light;
      }
    }

    .number-card {
      p {
        color: $color-text-light;
      }
    }

    .gauge {
      .background-arc {
        path {
          fill: $color-bg-med;
        }
      }

      .gauge-tick {
        path {
          stroke: $color-text-med;
        }

        text {
          fill: $color-text-med;
        }
      }
    }

    .linear-gauge {
      .background-bar {
        path {
          fill: $color-bg-med;
        }
      }

      .units {
        fill: $color-text-dark;
      }
    }

    .timeline {
      .brush-background {
        fill: rgba(255, 255, 255, 0.05);
      }

      .brush {
        .selection {
          fill: rgba(255, 255, 255, 0.1);
          stroke: #aaa;
        }
      }
    }

    .polar-chart .polar-chart-background {
      fill: rgb(30, 34, 46);
    }

  }

  .chart-legend {
    .legend-labels {
      background: rgba(255, 255, 255, 0.05) !important;
    }

    .legend-item {
      &:hover {
        color: #fff;
      }
    }

    .legend-label {
      &:hover {
        color: #fff !important;
      }

      .active {
        .legend-label-text {
          color: #fff !important;
        }
      }
    }

    .scale-legend-label {
      color: $color-text-med;
    }
  }

  .advanced-pie-legend {
    color: $color-text-med;

    .legend-item {
      &:hover {
        color: #fff !important;
      }
    }
  }

  .number-card .number-card-label {
    font-size: 0.8em;
    color: $color-text-med;
  }
}

Как только это будет добавлено, убедитесь, что у вас есть этот scss-файл, связанный с вашим файлом angular.json. После этого вам просто нужно добавить класс dark в первый компонент оболочки вашей диаграммы ngx, например, так:

<div class="areachart-wrapper dark">
    <ngx-charts-area-chart 
        [view]="view" 
        [scheme]="colorScheme" 
        [results]="data" 
        [gradient]="gradient" 
        [xAxis]="showXAxis"
        [yAxis]="showYAxis" 
        [legend]="showLegend" 
        [showXAxisLabel]="showXAxisLabel" 
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel" 
        [yAxisLabel]="yAxisLabel" 
        [autoScale]="autoScale" 
        [curve]="curve" 
        (select)="onSelect($event)">
    </ngx-charts-area-chart>
 </div>

Это заставит ваши диаграммы выглядеть точно так, как показано на официальном сайте, с темной темой для диаграмм: https://swimlane.github.io/ngx-charts/.

Источник

Наконец, я боролся с этой информацией и нашел кое-что интересное, просто добавив строку в тег ngx. Надеюсь помочь кому-то в будущем.

Справочник по проблеме - github #540

style="fill: #2B2B2B"

<ngx-charts-bar-horizontal
      [results]="results"
      [scheme]="colorScheme"
      [results]="single"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      (select)="onSelect($event)"
      style="fill: #2B2B2B;">   <----------------------- HERE
</ngx-charts-bar-horizontal>
Источник

В соответствии с этой проблемой GitHub вы можете использовать следующий CSS для стилизации надписей (работал для меня):

.ngx-charts text { fill: #fff; }

Упомянутый вами xAxisTickFormatting/yAxisTickFormatting может использоваться для предоставления функции форматирования, которая используется для генерации содержимого меток (например, если у вас есть даты в ваших данных, вы можете установить функцию форматирования, которая показывает дату в пользовательском формат, например, "ЧЧ: мм")

Источник

Форматирование тиков оси можно сделать так

https://github.com/swimlane/ngx-charts/blob/master/demo/app.component.html

это имеет отдельные классы элементов.

Источник
Другие вопросы по тегам