Highcharts中是否可以增大tooltip anchor的高度?
Highcharts增大tooltip anchor高度的实现方法
可以直接通过官方配置实现tooltip anchor(锚点连接杆)高度的调整,参考效果示意:
两种实现方案
方案1:内置参数调整(推荐)
直接修改tooltip.stemHeight配置项即可,该参数对应锚点连接杆的高度,单位为像素,默认值通常为10,按需调大数值即可生效,配置示例:
Highcharts.chart('container', { // 其他图表基础配置省略 tooltip: { stemHeight: 20, // 按需填写想要的高度值 // 可选:同时调整锚点宽度 stemWidth: 2 } });
方案2:自定义位置回调(适合复杂需求)
如果内置参数无法满足你的个性化定位需求,可以通过tooltip.positioner回调函数自定义tooltip的位置,间接调整锚点高度:
Highcharts.chart('container', { // 其他图表基础配置省略 tooltip: { positioner: function (labelWidth, labelHeight, point) { return { x: point.plotX - labelWidth / 2, // 调整y值减去的数值即可改变锚点高度 y: point.plotY - labelHeight - 20 }; } } });
补充说明:上述配置在普通tooltip、共享tooltip(
tooltip.shared: true)场景下均生效,如果是自定义SVG样式的tooltip,也可以直接修改锚点对应的路径参数调整高度。
内容的提问来源于stack exchange,提问作者Haswika
相关产品推荐
相关产品推荐

