2

Ngx-chartライブラリの折れ線グラフを使いたい。しかし、線に表示されるドットの色を変更することはできません。

したがって、ドットに使用される色を変更したり、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行が表示されますが、すべての学生のように1行にしたいので、学生のマークを示すチャートがあるため、チャートにはドットが異なる方法で表示される単一の行がありますマークのカテゴリに応じた色 >50 点の色 = 緑 マーク >70 点の色 = ピンクなど。

4

0 に答える 0