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

Я использую диаграммы ng2 из программы valor с моим приложением angular 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>

В моем классе машинописного текста я реализовал функцию barChartOptions:

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

чтобы настроить несколько вещей, но это кажется действительно ограниченным. Например, я могу изменить метку и т. Д., Используя свойство метки:

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

Но я не понимаю, как добавить дополнительные ярлыки. При использовании ng2-charts, если у меня есть столбчатая диаграмма с двумя наборами данных, и я наведен на одну полосу, тогда она отображает только метку и данные для этой полосы, но не отображает данные для второй полосы второго набора данных. Я хотел бы отобразить и то, и другое, но не вижу, как добавить для этого дополнительные метки и данные.


angular chart.js ng2-charts angular2-directives
person user1892775    schedule 19.02.2017    source источник
comment
Любой код, который вы сделали, если это так, обновите сообщение   -  person Aravind    schedule 19.02.2017
comment
Я наткнулся на несколько старых сообщений, в которых говорилось, что этого можно достичь с помощью свойства multiTooltipTemplate. Но я не вижу этого в текущей документации Chart.js chartjs .org / docs / # getting-started-global-chart-configuration Это больше не поддерживается? Если нет, то какая альтернатива сейчас?   -  person user1892775    schedule 20.02.2017

Ответы (2)


arrow_upward
3
arrow_downward

Я добился успеха со следующей настройкой:

Шаблон

<canvas
  baseChart
  [chartType]="chartSettings.lineChartType"
  [colors]="chartSettings.lineChartColors"
  [datasets]="lineChartData"
  [labels]="lineChartLabels"
  [legend]="chartSettings.lineChartLegend"
  [options]="chartSettings.lineChartOptions"   <---- the important one
>
</canvas>

И настройки я создал файл stats.chart-settings.ts:

export const ChartSettings: any = {
  lineChartOptions: {
    tooltips: {
      backgroundColor: 'rgba(255,255,255,0.9)',
      bodyFontColor: '#999',
      borderColor: '#999',
      borderWidth: 1,
      caretPadding: 15,
      colorBody: '#666',
      displayColors: false,
      enabled: true,
      intersect: true,
      mode: 'x',
      titleFontColor: '#999',
      titleMarginBottom: 10,
      xPadding: 15,
      yPadding: 15,
    }
  }
}

В компоненте у меня просто есть:

import { ChartSettings } from './stats.chart-settings';

...

chartSettings: any;

constructor() {
  this.chartSettings = ChartSettings;
}
person Boris Yakubchik    schedule 26.02.2019
comment
Вопрос в настройке HTML-содержимого. Вариант tooltips, похоже, не поддерживает это. - person Dem Pilafian; 16.06.2020

arrow_upward
0
arrow_downward

По сути, вы не можете применить стили с помощью CSS к диаграмме холста. Однако chartJS позволяет применять стили к всплывающим подсказкам. Дополнительную информацию можно найти на странице Настройка всплывающей подсказки

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

person hhsb    schedule 29.01.2018