如何根据值将颜色线更改为渐变颜色

Question

如何使用 ngx-chart 更改线条颜色？目标是根据 yAxis 改变颜色，并使用渐变颜色。

看来，如果我将 schemeType 从 ordinal 更改为 linear，它会执行我想要的操作，但这会删除图例。

像这个例子：

Related GitHub issue

Answer 1

为了实现我想要的效果，我使用了 schemeType linear 然后我使用 ngx-charts-legend.

创建了一个自定义图例

这不是一个完美的解决方案，因为我们不能设置 2 个不同的渐变。


  <div #containerRef class="d-flex" *ngIf="data.length && !loading">
    <ngx-charts-line-chart [view]="[containerRef.offsetWidth, 400]" [curve]="curve" [schemeType]="'linear'"
      [scheme]="colorScheme" [legend]="legend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
      [xAxis]="xAxis" [yAxis]="yAxis" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [timeline]="timeline"
      [results]="data" [activeEntries]="activeEntries" [roundDomains]="true" [yScaleMin]="0" [yScaleMax]="100">
    </ngx-charts-line-chart>
    <div *ngIf="legend" class="chart-legend custom p-1">
      <ngx-charts-legend [data]="chartNames" [title]="'Legend'" [colors]="colors"
        (labelActivate)="legendLabelActivate($event)" (labelDeactivate)="legendLabelDeactivate($event)">
      </ngx-charts-legend>
    </div>
  </div>

  public data: any[] = [];
  public view: any[];
  // options
  public legend: boolean = true;
  public chartNames: string[] = [];
  public showLabels: boolean = true;
  public animations: boolean = true;
  public xAxis: boolean = false;
  public yAxis: boolean = true;
  public yAxisTicks: number[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
  public showYAxisLabel: boolean = true;
  public showXAxisLabel: boolean = true;
  // xAxisLabel: string = 'Year';
  public activeEntries: any[];
  public yAxisLabel: string = 'Batt %';
  public timeline: boolean = true;
  public colorScheme = {
    domain: ['#a8385d', '#0000FF']
  };
  public colors: ColorHelper;

如何根据值将颜色线更改为渐变颜色

How to change color lines to gradient color depending on the value

javascript

angular

charts

ngx-charts