首页 文章

ng2-charts定制悬停在条形图上时显示的工具提示的数据和整个html内容

提问于
浏览
2

我正在使用来自valor软件的ng2图表和我的角度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>

在我的typescript类中,我实现了barChartOptions函数:

tooltips: {
    callbacks: {
        ...
        ...
}}

定制一些东西,但这似乎真的有限 . 例如,我可以使用label属性更改标签等:

label: function(tooltipItem, data) {                
    return "customlabel";
}

但是,我不知道如何添加其他标签 . 使用ng2-charts,如果我有一个带有两个数据集的条形图,并将鼠标悬停在一个条上,则它仅显示该条的标签和数据,但它不显示第二个数据集的第二个条的数据 . 我想显示两者,但不知道如何为此添加其他标签和数据 .

1 回答

  • 0

    基本上,您不能使用css将样式应用于画布图表 . 但是,chartJS提供了一种将样式应用于工具提示的方法 . 请阅读Tooltip customisation了解更多信息

    还要考虑这个例子:内部图表选项 tooltips: {backgroundColor: '#fff'}

相关问题