web-dev-qa-db-ja.com

カスタムツールチップコンテンツ@ ngx-charts | Angular2 + | TypeScript

私は折れ線グラフのツールチップにカスタムラベルを設定しようとしていました。たとえば、HH：mm形式で変更された分数（74分-> 1:14）を、かなり長い間、残念ながら成功していませんでした。値を1.283（... 3）として表示することは代替ではありません。

ツールチップラベルとしてHH：mmの数

X軸とy軸の値（それぞれ日付と数値）を保持し、ツールチップ表示値を変更する方法を知っている人はいますか？

例： https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart

色、国名、番号を表示するツールチップの代わりに、->色、国名、文字列（Number> 3000？ 'high'： 'low';）

現在の動作意図したとおりに動作します。

期待される動作カスタムラベルを表示します。

問題の再現上記の説明のリンク

動作を変更する動機/ユースケースは何ですか？ツールチップのコンテンツをカスタマイズできること

環境について教えてください：OS：Win 10 x64、IDE：Eclipse EE

ngx-charts version：3.0.2

角度バージョン：6.0.2

ブラウザ：[すべて]

Language：[TypeScript 2.3.3]

labeltooltipngx-charts
6
odjov

独自のツールチップテンプレートを定義して、好きなHTMLをレンダリングできます。

<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>

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

コードはこちら： https://github.com/swimlane/ngx-charts/blob/master/demo/app.component.html#L755-L76

18
Marjan

上記のソリューションは、積み上げ水平/垂直バーのような多次元チャート（> 3）では機能しません。

すべての場合に機能する別の簡単な方法は、以下のようなモデルの一部としてtooltipTextを属性として追加することです。

export let multi = [
  {
    name: 'Germany',
    series: [
      {
        name: '2010',
        value: 7300000,
        tooltipText: 't1'
      },
      {
        name: '2011',
        value: 8940000,
        tooltipText: 't2'
      }
    ]
  }
];

次に、マークアップで次のコードを使用します。

<ngx-charts-bar-horizontal-stacked
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [legendPosition]="legendPosition"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      (select)="onSelect($event)">
  <ng-template #tooltipTemplate let-model="model">
    <div class="tooltip">
      {{model.tooltipText}}
    </div>
  </ng-template>
</ngx-charts-bar-horizontal-stacked>
0
saint1729

もう一度ありがとう。問題を未解決のままにしたくありませんでした。問題はコードスニペットが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