温馨提示:本文翻译自stackoverflow.com，查看原文请点击：angular - Display latest data as a pointer on axis in Highchart

angular highcharts

angular - 在Highchart中将最新数据显示为轴上的指针

发布于 2020-04-09 10:25:19

我正在使用 Angular 高的图表。我想知道是否可以向显示该系列的最新值的轴添加一个指针，如下图所示。我确实有一个共享的工具提示，例如本示例中的提示：

tooltip: {
xDateFormat: '%d/%m/%Y',
shared: true,
split: false,
enabled: true},

http://jsfiddle.net/vkd76qx3/

我想保留工具提示，但是即使我没有在任何系列上悬停，我仍然希望看到卡在轴上的最新值。

提问者

user2833621

被浏览

72

查看英文版

查看原文

ppotaczek 2020-02-03 19:30

您可以为每个最后一个点分配一个注释，并在render发生事件时将其移动到绘图区域之外：

chart: {
  ...,
  events: {
    render: function() {
      this.annotations[0].labels.forEach(function(label) {
        label.graphic.attr({
          x: this.plotLeft + this.plotWidth
        });
      }, this);
    }
  }
},
annotations: [{
  labelOptions: {
    padding: 5,
    align: 'left',
    overflow: 'none',
    verticalAlign: 'middle',
    allowOverlap: true,
    text: '{point.y:.2f}',
    y: 0,
    x: 10
  },
  labels: [{
    point: 's1LastPoint'
  }, {
    point: 's2LastPoint'
  }, {
    point: 's3LastPoint'
  }]
}]

现场演示： http : //jsfiddle.net/BlackLabel/6m4e8x0y/4800/

API参考：

https://api.highcharts.com/highcharts/chart.events.render

https://api.highcharts.com/highcharts/annotations

user2833621 2020-02-08 01:30:26

感谢@ppotaczek的帮助，但我看不到小提琴的现场演示。我只能看到系列图例，但看不到数据或任何标签。所以我无法验证。

ppotaczek 2020-02-10 18:53:04

@ user2833621，您好：请检查以下示例：jsfiddle.net/BlackLabel/u06prdns/1

相关问题

1

NGXS如何在异步调用后触发Angular重新渲染？

2

用intercept更改赛普拉斯中相同URL的灯具响应

3

根据Observable本身中的数据填充Observable中的数据

4

将Angular 11 HttpClient通用 Observable map服务值转换为一个类

5

在订阅块角离子之后使用变量

6

自定义 Angular 的阿尔及利亚搜索框

7

Ngfor数组并通过ngif访问

8

打破lambda表达式箭头的TsLint规则名称是什么？

9

覆盖外部组件的封装CSS

10

以 Angular 显示或隐藏鼠标悬停时的元素

热门github

1

Suna - Open Source Generalist AI Agent

2

Lightning-fast and Powerful Code Editor written in Rust (翻译：使用Rust编写的快速、强大的代码编辑器)

3

AI-powered multi-agent builder

4

OCRmyPDF adds an OCR text layer to scanned PDF files, allowing them to be searched

5

Find vulnerabilities, misconfigurations, secrets, SBOM in containers, Kubernetes, code repositories, clouds and more (翻译：容器映像、文件系统和 Git 存储库中的漏洞以及配置问题和硬编码机密的扫描程序)

6

Linux, Jenkins, AWS, SRE, Prometheus, Docker, Python, Ansible, Git, Kubernetes, Terraform, OpenStack, SQL, NoSQL, Azure, GCP, DNS, Elastic, Network, Virtualization. DevOps Interview Questions (翻译：包含Linux、Jenkins、AWS、SRE、Prometheus、Docker、Python、Ansible、Git、Kubernetes、Terraform、OpenStack、SQL、NoSQL、Azure、GCP、DNS、弹性、网络、虚拟化等DevOps 面试问题)

7

A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more. (翻译：这个存储库是我每天在工作中使用的各种材料和工具的集合。)

8

Collection of leaked system prompts

9

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today! (翻译：Reactive Resume 是一款免费开源的简历生成器，支持定制和移植、安全、开源且永久免费。赶紧试试吧！)

10

21 Lessons, Get Started Building with Generative AI 🔗 https://microsoft.github.io/generative-ai-for-beginners/ (翻译：12 节课程，开始使用生成式 AI 进行构建)

11

AI Notepad for back-to-back meetings. Local-first & Extensible.

12

Build Real-Time Knowledge Graphs for AI Agents

13

Your AI second brain. Self-hostable. Get answers from the web or your docs. Build custom agents, schedule automations, do deep research. Turn any online or local LLM into your personal, autonomous AI (gpt, claude, gemini, llama, qwen, mistral). Get started - free.

14

科技爱好者周刊，每周五发布

15

Dify is an open-source LLM app development platform. Dify's intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production.