2

我想使用 Ngx-chart 库的折线图。但是我无法更改在线上显示的点的颜色。

因此，如何更改用于点的颜色或为 Ngx-chart 折线图中的点提供自己的颜色？

在 line-chart.html 文件中

<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"
      [timeline]="timeline"
      (select)="onSelect($event)">
    </ngx-charts-line-chart>

并且在 line-chart.ts 文件中的图表配置将如下所示

 multi: any[] = [
  {
    name: 'Cyan',
    series: [
      {
        name: 5,
        value: 2650
      },
      {
        name: 10,
        value: 2800      },
      {
        name: 15,
        value: 2000
      }
    ]
  },
  {
    name: 'Yellow',
    series: [
      {
        name: 5,
        value: 2500
      },
      {
        name: 10,
        value: 3100
      },
      {
        name: 15,
        value: 2350
      }
    ]
  }
];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Number';
  showYAxisLabel = true;
  yAxisLabel = 'Color Value';
  timeline = true;

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = true;

  constructor() {
  }

  onSelect(event) {
    console.log(event);
  }

在上面的代码输出中，它在图表中显示了 2 条线，但我想为每个学生制作一条线，就像每个学生都会有一个表示学生分数的图表，所以图表中会有一条线，其中的点将以不同的方式显示根据标记类别的颜色，例如标记 >50 点颜色 = 绿色标记 >70 点颜色 = 粉红色等。

4

0 回答 0