Question

我的 htmp 中有一个图表，但是当我将鼠标放在图表的点上时，我想显示我的气球。

图表显示了我在我选择的两个日期之间每天购买的所有气球。

我的气球有这个字段：

String color;
String dateCreation;
Int size;

在我的 .ts 文件中，我有这些信息：

ballonMap: Map<String, Ballon[]>

Cet objet contient pour les clés, l'intervalle de jour précisé par l'utilisateur。 Et en valeur, une table des ballons 倒 chaque 日期。 La liste est vide pour lesdates où aucun ballon n'a été achetés。

在 peut donc avoir dans la map 上

<2021-04-08, [气球 1, 气球 2]>
<2021-04-09, [气球 3]>
<2021-04-10, []>
<2021-04-11, [气球 4、气球 5、气球 6]>

还有

tabDateBallons = Object.keys(this.ballonMap);
tabValueBallons = Object.values(this.ballonMap);
let t:number[] = [];
tabValueBallons.forEach(x=>t.push(x.length));

new Chart("myChart", {
          type: 'line',
          data: {
            labels: tabDateTickets,
            datasets: [{
              label: '# of Votes',
              data: t,
              backgroundColor: 'red',
              borderColor: 'red',
              borderWidth: 1
            }]
          },
          options: {
            scales: {
              y: {
                beginAtZero: true
              }
            }
          }
        });

所以我想要一个工具提示，以便在我放置鼠标时显示气球的所有功能。例如，如果我将鼠标放在 2021 年 4 月 11 日的图表中，我希望光标中有一个工具提示，我可以在其中看到 3 个气球和所有字段。

我尝试在这样的选项中添加工具提示

new Chart("myChart", {
              type: 'line',
              data: {
                labels: tabDateTickets,
                datasets: [{
                  label: '# of Votes',
                  data: t,
                  backgroundColor: 'red',
                  borderColor: 'red',
                  borderWidth: 1
                }]
              },
              options: {
                tooltips: {
                     callbacks: {
                        label " test display !";
                        }
                     }
                },
                scales: {
                  y: {
                    beginAtZero: true
                  }
                }
              }
            });

但它不起作用。你能帮我吗？

带有 Angular 和 Chart.Js 的图表工具提示

0 个答案: