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

Question

我一直在尝试在折线图的工具提示中设置自定义标签,例如,以HH:mm格式修改分钟数(74分钟 - > 1:14),已经有一段时间了,但遗憾的是没有任何成功.将值显示为1.283(... 3)不是替代方案.

数字到HH:mm作为工具提示标签

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

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

而不是显示颜色,国家名称和数字的工具提示, - >颜色,国家名称和字符串(数字> 3000？'高':'低';)

当前行为 按预期工作.

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

复制问题 链接在上面的描述中

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

请告诉我们您的环境: 操作系统:Win 10 x64,IDE:Eclipse EE

ngx-charts版本: 3.0.2

角度版本: 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/master/demo/app.component.html#L755-L760