如何在 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;
  }
}

添加后，请确保在 angular.json 文件中链接了此 scss 文件。 之后，您只需在 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 。

Answer 2

最后，我正在努力处理这些信息，并找到了一些整洁的东西，只需在 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> 

Answer 3

根据此GitHub 问题，您可以使用以下 CSS 来设置标签样式（对我有用）：

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

您提到的 xAxisTickFormatting/yAxisTickFormatting 可用于提供用于生成标签内容的格式化函数（例如，如果您的数据中有日期，则可以设置在自定义中显示日期的格式化函数格式，如“HH:mm”）

Answer 4

轴刻度格式可以这样完成

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

这有单独的元素类。