Как вы маркируете точки в ScatterChart, построенном с использованием ng2-диаграммы

Question

Я построил эту диаграмму рассеяния, используя диаграмму ng2: То, что я хочу: отобразить «имя» рядом с каждой черной точкой на графике.

Chart.component.html:

<!-- chart.js -->
<div style="display: block;">
  <canvas
    baseChart
    [datasets]="scatterChartData"
    [options]="scatterChartOptions"
    [chartType]="scatterChartType"
  >
  </canvas>
</div>
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <div class="typo-line">
    <h4><p class="category"><b>Légende</b></p></h4>
  </div>
    <p class="text-primary">
      R-1 Tremblement de terre
    </p>
    <p class="text-primary">
      R-2 Température et humidité
    </p>
  </div>
</div>

Chart.component.ts: код, который создает черные точки:

public scatterChartType: ChartType = "scatter";
  constructor(private data: AnalyseRisqueService) {}
  probaGraviteValuesIndexedByRow:number[][]=[]
  ngOnInit() {
     this.data.currentProbaGraviteValuesIndexedByRow.subscribe(receivedProbaGraviteValuesIndexedByRow=>
      (this.probaGraviteValuesIndexedByRow=receivedProbaGraviteValuesIndexedByRow)
      )
    setTimeout(() => {
      this.chart.chart.data.datasets[0].data = [
        { x: this.probaGraviteValuesIndexedByRow[0][0], y: this.probaGraviteValuesIndexedByRow[0][1] },
        { x: this.probaGraviteValuesIndexedByRow[1][0], y: this.probaGraviteValuesIndexedByRow[1][1] },
        { x: this.probaGraviteValuesIndexedByRow[2][0], y: this.probaGraviteValuesIndexedByRow[2][1] },
        { x: this.probaGraviteValuesIndexedByRow[3][0], y: this.probaGraviteValuesIndexedByRow[3][1] },
        { x: this.probaGraviteValuesIndexedByRow[4][0], y: this.probaGraviteValuesIndexedByRow[4][1] },
        { x: this.probaGraviteValuesIndexedByRow[5][0], y: this.probaGraviteValuesIndexedByRow[5][1] },
      ]
      this.chart.chart.update();
  }, 1000);
  }

Answer 1

Благодаря подсказке Викаса мне удалось решить эту проблему:

   tooltips: {
      callbacks: {
        label: (item, data) =>
        {
          if (item.index===0){
            return 'Risque: 0'
          }
          else if (item.index===1) {
            return 'Risque: 1'
          }
        }
      }
    }

Таким образом, я могу контролировать, какую метку отображать в зависимости от того, какую точку я хочу.

Answer 2

Подсказка для точек предоставляется с помощью привязки options для холста.

Добавьте всплывающую подсказку в качестве обратного вызова к вашему scatterChartOptions объекту, как в вашем файле TS:

public scatterChartOptions: ChartOptions = {
    responsive: true,
    tooltips: {
      callbacks: {
        label: (item, data) => 
        {
          console.log(item);
          return 'Label: ' + item.xLabel + ' ' + item.yLabel
        }
      }
    }
  };

Это должно отобразить простую метку с вашими значениями x и y.

Взгляните на этот рабочий StackBlitz.