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

发布时间：2020-12-17 07:07:01 所属栏目：安全来源：网络整理

导读：我一直在尝试在折线图的工具提示中设置自定义标签,例如,以HH：mm格式修改的分钟数(74分钟 – 1:14),已经有一段时间了,但遗憾的是没有任何成功.将值显示为1.283(… 3)不是替代方案. Number to HH:mm as tooltip label 有人知道如何保留x和y轴值(分别是日期和

我一直在尝试在折线图的工具提示中设置自定义标签,例如,以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

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

目前的行为
按预期工作.

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

再现问题
链接在上面的描述中

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

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

ngx-charts版本：3.0.2

角度版本：6.0.2

浏览器：[全部]

语言：[TypeScript 2.3.3]

解决方法

您可以定义自己的工具提示模板并在其中呈现您喜欢的任何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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!