自定义工具提示内容@ngx-charts |角度2+ |打字稿

Question

我一直在尝试在折线图的工具提示中设置自定义标签，例如，修改 HH:mm 格式的分钟数（74 分钟 --> 1:14），相当一部分现在的时间，但不幸的是没有任何成功。将值显示为 1.283(...3) 不是替代方案。

Number to HH:mm as tooltip label

有人知道如何保留 x 和 y 轴值（分别是日期和数字），并修改工具提示显示值吗？

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

不再使用显示颜色、国家/地区名称和数字的工具提示， --> 颜色、国家名称和字符串 (Number > 3000 ? 'high' : 'low';)

当前行为 按预期工作。

预期行为 显示自定义标签。

问题重现 Link 上面的描述

改变行为的动机/用例是什么？ 能够自定义工具提示的内容

请告诉我们您的环境： OS：Win 10 x64，IDE：Eclipse EE

ngx-charts 版本： 3.0.2

Angular版本：6.0.2

浏览器：[全部]

语言：[TypeScript 2.3.3]

Answer 1

您可以定义自己的工具提示模板并在其中呈现您喜欢的任何 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/8ebb3dbcbbea443fefdcafd1f5c9069df0e0c4ae/src/app/app.component.html#L992-L998

Answer 2

再次感谢您。不想让问题悬而未决。问题是 代码片段在 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>

Answer 3

上述解决方案不适用于 multi-dimensional 图表 ( > 3)，例如 Stacked Horizontal/Vertical Bar。

另一种适用于所有情况的简单方法是将 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>

自定义工具提示内容@ngx-charts |角度2+ |打字稿

Custom tooltip contents @ ngx-charts | Angular2+ | TypeScript

label

tooltip

ngx-charts