Angular 如何在使用ng2图表构建的散点图中标记点

我使用ng2图表构建了这个散点图： 我想要的是：在图形中的每个黑点旁边显示一个“名称”

Chart.component.html：

---

使用画布的

选项

绑定提供点的工具提示

将工具提示作为回调添加到TS文件中的

scatterChartOptions

对象：

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

这将显示一个带有x和y值的简单标签

---

看一看正在工作的StackBlitz。

多亏了Viqas的提示，我成功地解决了这个问题：

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

---

通过这种方式，我可以根据我想要的点来控制显示哪个标签。

您能提供一个关于@Viqas的工作演示吗？@Viqas。这基本上是同一个示例。这有帮助吗？是的，谢谢。这有帮助。然而，我需要给每一点都加上它自己的标签。如果（点1），则（标签1）；我尝试使用item变量。但是，console.log（项）不记录任何内容。知道为什么吗？太好了！超级的！现在，我可以根据item对象内的参数指定要显示的标签。我相信这个问题已经解决了。非常感谢：{xLabel:1，yLabel:1，label:“1”，value:“1”，index:1，…}索引表示点索引。那应该能解决我的问题。如果这个问题有效，我会发布一个答案，或者简单地说：return（'Risque'+item.index）

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

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