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标签内添加了一行。希望以后能帮助别人。

Problem Reference - 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 2

Axis ticks格式化可以像这样完成

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

这有单独的元素类。

Answer 3

根据此GitHub issue，您可以使用以下CSS设置标签样式（为我工作）：

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

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

Answer 4

如果应用程序中的背景较暗，并且想为ngx图表使用浅色，则可以使用此方法。它将使用ngx深色主题的官方代码，并为图表标签显示浅色。您还可以更改sccss变量中的颜色代码，然后根据需要运行。

我使用官方网站上的方式解决了它。在您的样式应用程序SCSS文件中，添加以下样式：

function myFunc(one, two) { 
  console.log(one, two)
 }

const functionArgsObj = {
    one: 1,
    two: 2
}

const functionArgsArr = [
    1,
    2
]


// myFunc(...functionArgsObj); throws error

myFunc(...functionArgsArr); // works as expected (output: 1, 2)

一旦添加了此内容，请确保在您的angular.json文件中链接了此scss文件。之后，您只需要在ngx图表的第一个包装组件中添加深色类，例如：

.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;
  }
}

这将使您的图表看起来与官方网站上显示的完全一样，图表的主题为深色：https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical。

如何在ngx-charts折线图

4 个答案: