如何在 Highcharts 中使用自定义样式更改标记符号和数据标签

2023-12-13

我们如何在悬停时自定义数据标签和标记符号?请参考下图:

**image**


将标记内的符号作为图像(url 链接)添加到系列中的最后一个数据

叉小提琴探索它

    series: [{
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,{
        y: 26.5,
        dataLabels: {
                    enabled: true,
                },
        marker: {
        radius: 10,
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
    }
    }],
}, {
  data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,{
        y: 103.9,
        dataLabels: {
                    enabled: true,
                },
        marker: {
        radius: 10,
        symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)',
    }
    }],
}],

Edit

根据新要求

        series: [{
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
         point: {
      events: {
        mouseOver: function(e) {
          this.series.data.forEach(p => {
            p.update({
              dataLabels: {
                enabled: false
              },
              marker: {
              radius: 10,
              symbol: 'circle',
          }
            }, false, false)
          });

          this.update({
            dataLabels: {
              enabled: true
            },
             marker: {
            radius: 10,
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
            }

          });
        }
      }
    }
}, {
  data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
   point: {
      events: {
        mouseOver: function(e) {
          this.series.data.forEach(p => {
            p.update({
              dataLabels: {
                enabled: false
              },
              marker: {
              radius: 10,
              symbol: 'circle',
          }
            }, false, false)
          });

          this.update({
            dataLabels: {
              enabled: true
            },
             marker: {
            radius: 10,
            symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)',
            }

          });
        }
      }
    }
}],

小提琴链接

Update 小提琴链接

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Highcharts 中使用自定义样式更改标记符号和数据标签 的相关文章

  • 在Javascript中按降序对字符串进行排序(最有效)?

    W3Schools 有这个例子 var fruits Banana Orange Apple Mango fruits sort fruits reverse 这是在 Javascript 中按降序对字符串进行排序的最有效方法吗 Updat
  • Highcharts 蜘蛛网标签重叠(顶部和底部)

    我使用 highcharts 创建了蜘蛛网图表 但我在最顶部和最底部的标签中发现了重叠的标签 我尝试包裹它们 也尝试交错标签 但我无法阻止它们重叠 function spiderchartFull highcharts chart pola
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • IE 中的 jQuery .width(val) 错误 - 无效参数

    通过ajax加载内部div book table 后 我想调整正文的宽度以适应更大的内容 var new width parseInt book table css width 407 body width new width 在 FF 和
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐