2017-02-19 48 views
1

上徘徊,我使用与勇猛软件NG2图表与我的角2应用程序时的数据和工具提示的整个HTML内容的显示。我无法弄清楚如何自定义鼠标悬停在条形图时所显示的默认提示的全HTML内容。NG2-图表来定制条形图

任何想法?

更新:

这里是我的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: function(tooltipItem, data) {     
    return "customlabel"; 
} 

但是,我不看我怎么可以添加额外的标签。与NG2-图表,如果我有两个数据集的条形图,和悬停一个条上,然后只显示标签和数据为棒,但它不会对第二数据集的所述第二条显示数据。我想显示两者,但看不到我如何为此添加其他标签和数据。

+0

你若有更新的帖子 – Aravind

+0

我遇到一些旧帖子认为这可以通过使用multiTooltipTemplate属性来实现来完成的任何代码。但是,我不认为这在当前chart.js之文件http://www.chartjs.org/docs/#getting-started-global-chart-configuration 难道这不再支持?如果不是,现在有什么选择? – user1892775

回答

0

基本上,你可以不适用使用CSS画布图表样式。但是,chartJS提供了一种将样式应用于工具提示的方法。请阅读更多在Tooltip customisation

还要考虑这个 例如:里面的图表选项tooltips: {backgroundColor: '#fff'}