我正在使用来自 valor 软件的 ng2 图表和我的 angular 2 应用程序。我无法弄清楚如何自定义将鼠标悬停在条形图上时显示的默认工具提示的整个 html 内容。
有任何想法吗?
更新:
这是我的 html/标记代码:
<canvas baseChart width="100" height="100" style="padding:24px; border:1px solid black;border-color:gray"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[colors]="chartColors"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
在我的打字稿类中,我实现了 barChartOptions 函数:
tooltips: {
callbacks: {
...
...
}}
定制一些东西,但这似乎真的很有限。例如,我可以使用 label 属性更改标签等:
label: function(tooltipItem, data) {
return "customlabel";
}
但是,我看不到如何添加其他标签。使用 ng2-charts,如果我有一个包含两个数据集的条形图,并将鼠标悬停在一个条上,则它仅显示该条的标签和数据,但不显示第二个数据集的第二个条的数据。我想同时显示两者,但不知道如何为此添加额外的标签和数据。