自定义工具提示内容@ ngx-charts | Angular2 + |打字稿 [英] Custom tooltip contents @ ngx-charts | Angular2+ | TypeScript

问题描述

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

I've been trying to set a custom label in a line chart's tooltip , e.g., modified number of minutes in HH:mm format (74 min --> 1:14), for quite some time now, but unfortunately without any success. Displaying the value as 1.283(...3) is not an alternative.

编号为HH:mm的工具提示标签

有人知道如何保存x和y轴值(分别是日期和数字)以及修改工具提示显示值吗?

Does anybody know how to preserve the x and y axis values (a date and a number respectively), and modify the tooltip display value?

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

与其显示颜色，国家/地区名称和数字的工具提示不同， ->颜色，国家/地区名称和字符串(数字> 3000吗?高":低"；)

Instead of having a tooltip that displays Color, Country name and Number, --> Color, Country name and String (Number > 3000 ? 'high' : 'low';)

当前行为 按预期工作.

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

问题重现 链接到上面的描述中

Reproduction of the problem Link in the description above

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

What is the motivation / use case for changing the behavior? Being able to customize tooltips' contents

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

Please tell us about your environment: OS: Win 10 x64, IDE: Eclipse EE

ngx图表版本: 3.0.2

角度版本: 6.0.2

浏览器: [全部]

语言:[TypeScript 2.3.3]

Language: [TypeScript 2.3.3]

推荐答案

您可以定义自己的工具提示模板，并在其中呈现所需的任何HTML:

You can define your own tooltip templates and render any HTML you like in them:

<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

这篇关于自定义工具提示内容@ ngx-charts | Angular2 + |打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！