ng2-chartsは、棒グラフ上にカーソルを置いたときに表示されるツールチップのデータとHTMLコンテンツ全体をカスタマイズします

Question

私は角度2のアプリケーションでvalorソフトウェアのng2グラフを使用しています。棒グラフの上にマウスを置いたときに表示されるデフォルトのツールチップのHTMLコンテンツ全体をカスタマイズする方法を理解できません。

アイデア？

更新：

ここ

は私のhtml /マークアップコードです：私のtypescriptですクラスで

<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チャートでは、2つのデータセットを持つ棒グラフを1つのバーに置くと、そのバーのラベルとデータだけが表示されますが、2番目のデータセットの2番目のバーのデータは表示されません。私は両方を表示したいと思いますが、ラベルとデータを追加する方法がわかりません。

Answer 1

基本的に、CSSを使用してスタイリングをキャンバスチャートに適用することはできません。ただし、chartJSはツールチップにスタイルを適用する方法を提供します。チャートオプションtooltips: {backgroundColor: '#fff'}