2017-02-19 57 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'}