如何在Angular 2的Ngx图中为折线图中显示的点设置不同的颜色?

时间:2019-03-20 11:40:51

标签: angular charts ngx-charts

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

因此,如何更改Ngx图表折线图中用于点的颜色或为点提供自己的颜色?

在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的点颜色=粉色,就像是明智的。

0 个答案:

没有答案