angular - 如何设置 ngx-charts 折线图中 x 轴和 y 轴标签颜色的格式

Question

我正在使用 ngx-charts 来绘制时间序列数据。

我正在使用他们的示例

<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/#/ngx-charts/line-chart

Answer 1

如果您的应用程序中有深色背景，并且想要为 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 文件中。之后，您只需在 ngx 图表的第一个包装组件中添加 dark 类，如下所示:

<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-charts/bar-vertical .