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

score 9 · Accepted Answer

如果您的应用程序中有深色背景，并且想为您的 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 图表的第一个包装组件中添加暗类，例如：

<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 。

score 3 · Accepted Answer

最后，我在这些信息上苦苦挣扎，发现了一些简洁的东西，只需在 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>

score -1 · Accepted Answer

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

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

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

score -2 · Accepted Answer

轴刻度格式化可以这样完成

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

这有单独的元素类。

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

4 回答 4

Related

Reference