ng2-диаграммы настраивают данные и весь html-контент всплывающей подсказки, отображаемой при наведении указателя на гистограмме

Question

Я использую диаграммы ng2 из программного обеспечения valor с моим угловым 2-мя приложениями. Я не могу понять, как настроить весь html-контент всплывающей подсказки по умолчанию, отображаемой при наведении курсора на гистограмму.

Любые идеи?

Update:

Вот мой 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-диаграммами, если у меня есть гистограмма с двумя наборами данных и наведите курсор на одну полосу, тогда она отображает только метку и данные для этой полосы, но не отображает данные для второго столбца второго набора данных. Я хотел бы показать оба, но не вижу, как я могу добавить дополнительные метки и данные для этого.

Answer 1

В принципе, вы не можете применять стиль, используя css, на холсте. Тем не менее, chartJS предоставляет способ применения стилей к подсказкам. Пожалуйста, прочитайте больше на Tooltip customisation

Также рассмотрим этот пример: Внутри опций диаграммы tooltips: {backgroundColor: '#fff'}