Question

我使用ng2-chart构建了此scatterChart：我想要的是：在图形中每个黑点旁边显示一个“名称”。

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

使用画布的options绑定提供点的工具提示。

将工具提示作为回调添加到scatterChartOptions对象中，就像在TS文件中一样：

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

这应该显示带有x和y值的简单标签。

看看this正在工作的StackBlitz。

Answer 2

感谢Viqas的提示，我设法解决了这个问题：

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

这样，我可以根据需要控制显示哪个标签。

如何在使用ng2-chart构建的scatterChart中标记点

2 个答案: