web-dev-qa-db-fra.com

Contenu de l'info-bulle personnalisée @ ngx-charts | Angular2 + | Manuscrit

J'essaie de définir une étiquette personnalisée dans l'info-bulle d'un graphique, par exemple, le nombre de minutes modifié au format HH: mm (74 min -> 1:14), depuis un certain temps déjà, mais malheureusement sans succès. Afficher la valeur sous la forme 1.283 (... 3) n'est pas une alternative.

Numéro en HH: mm sous forme d’info-bulle

Est-ce que quelqu'un sait comment conserver les valeurs des axes x et y (une date et un nombre respectivement) et modifier la valeur d'affichage de l'info-bulle?

Par exemple: https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart

Au lieu d'avoir une info-bulle qui affiche Couleur, Nom du pays et Numéro, -> Couleur, Nom du pays et Chaîne (Nombre> 3000? 'High': 'low';)

Comportement actuel Fonctionne comme prévu.

Comportement attendu Pour afficher des étiquettes personnalisées.

Reproduction du problème Lien dans la description ci-dessus

Quelle est la motivation/cas d'utilisation pour changer le comportement? Être capable de personnaliser le contenu des info-bulles

Veuillez nous parler de votre environnement: OS: Win 10 x64, IDE: Eclipse EE

version de ngx-charts: 3.0.2

Angular version: 6.0.2

Navigateur: [tout]

Langage: [TypeScript 2.3.3]

labeltooltipngx-charts
2
odjov

Vous pouvez définir vos propres modèles d’infobulle et restituer le code HTML que vous préférez:

<ngx-charts-line-chart        
    [scheme]="colorScheme"
    [results]="multi" ...>
  <ng-template #tooltipTemplate let-model="model">
    This is the single point tooltip template
    <pre>{{model|json}}</pre>
  </ng-template>

  <ng-template #seriesTooltipTemplate let-model="model">
    This is vertical line tooltip template
    <pre>{{model|json}}</pre>        
  </ng-template>
</ngx-charts-line-chart>

Exemple: https://swimlane.github.io/ngx-charts/#/ngx-charts/tooltip-templates

Le code est ici: https://github.com/swimlane/ngx-charts/blob/master/demo/app.component.html#L755-L760

5
Marjan

Merci une fois de plus. Je ne voulais pas laisser le problème non résolu. Le problème était l'extrait de code était dans un élément svg .

<!--  This is single point tooltip template -->
<xhtml:ng-template #tooltipTemplate let-model="model">
  <xhtml:div class="area-tooltip-container">
    <xhtml:div *ngFor="let tooltipItem of model | json | durationHhmm" class="tooltip-item" style="text-align: center;">
      <a style=" font-size: 1.2em;">{{tooltipItem.series}}</a><a *ngIf="tooltipShowTime==='DAY' || tooltipShowTime==='WEEK'" style=" font-size: 1.2em;"><br />{{tooltipItem.name | date: 'HH:mm'}} Uhr</a><a *ngIf="tooltipShowTime!=='DAY' && tooltipShowTime!=='WEEK'" style=" font-size: 1.3em; font-weight: 600;"><br />&#183;</a><br /><a style=" font-size: 1.2em; font-weight: 600;">{{tooltipItem.name | date: 'dd.MM.yyyy'}} &#183; </a><a style=" font-size: 1.3em; font-weight: 600;">{{tooltipItem.value}}</a>
    </xhtml:div>
  </xhtml:div>
</xhtml:ng-template>

<!-- Datapoints Y-Axis -->
<svg:g *ngFor="let series of data">
  <svg:g ngx-charts-circle-series
         [xScale]="xScale"
         [yScale]="yScale"
         [colors]="colors"
         [data]="series"
         [scaleType]="scaleType"
         [visibleValue]="hoveredVertical"
         [activeEntries]="activeEntries"
         [tooltipDisabled]="tooltipDisabled"
         [tooltipTemplate]="tooltipTemplate"
         (select)="onClick($event, series)"
         (activate)="onActivate($event)"
         (deactivate)="onDeactivate($event)"
  /> 
</svg:g>
0
odjov