Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >高图表工具提示箭头位置

高图表工具提示箭头位置
EN

Stack Overflow用户
提问于 2016-01-18 17:54:06
回答 1查看 2K关注 0票数 4

我试图修改一个堆叠的列图的高级图表工具提示,以便工具提示上的小箭头指向条形图的中间。我知道我可以使用positioner回调来更改工具提示的位置,但是看起来箭头总是指向酒吧的顶部,不管它的位置是什么。看看我的小提琴是什么意思:http://jsfiddle.net/4dy46vfx/1/

下面是我所追求的一个粗略的截图:

有任何方法可以改变工具提示箭头的位置吗?

EN

回答 1

Stack Overflow用户

发布于 2019-06-13 05:44:43

使用禁用的tooltip.animation属性,您可以在updatePosition方法的包装中计算anchorY

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function(H) {
    H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, point) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.label.attr({
            anchorY: point.plotY + point.h / 2 + this.chart.plotTop
        });
    });
}(Highcharts));

现场演示: http://jsfiddle.net/BlackLabel/91tfrL45/

启用动画后,有必要重写该方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Highcharts.Tooltip.prototype.updatePosition = function(point) {
    var chart = this.chart,
        label = this.getLabel(),
        pos = (this.options.positioner || this.getPosition).call(
            this,
            label.width,
            label.height,
            point
        ),
        anchorX = point.plotX + chart.plotLeft,
        anchorY = point.plotY + point.h / 2 + chart.plotTop,
        pad;

    // Set the renderer size dynamically to prevent document size to change
    if (this.outside) {
        pad = (this.options.borderWidth || 0) + 2 * this.distance;
        this.renderer.setSize(
            label.width + pad,
            label.height + pad,
            false
        );
        anchorX += chart.pointer.chartPosition.left - pos.x;
        anchorY += chart.pointer.chartPosition.top - pos.y;
    }

    // do the move
    this.move(
        Math.round(pos.x),
        Math.round(pos.y || 0), // can be undefined (#3977)
        anchorX,
        anchorY
    );
}

现场演示: http://jsfiddle.net/BlackLabel/w1qomy0x/

API参考: https://api.highcharts.com/highcharts/tooltip.animation

文档: https://www.highcharts.com/docs/extending-highcharts

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34867275

复制
相关文章
【UI界面设计】CSS生成工具,提示箭头
主要代码预览: <form class='configuration'> <h2>Arrow configuration</h2> <div class='clr'> <ol class='section positions'> <li> <label>Position</label> <label><input type="radio" name="p
用户5997198
2019/11/13
8980
【UI界面设计】CSS生成工具,提示箭头
【前端小白进阶】CSS生成工具,网页提示箭头
主要代码预览: HTML代码: <form class='configuration'> <h2>Arrow configuration</h2> <div class='clr'> <ol class='section positions'> <li> <label>Position</label> <label><input type="radio
用户5997198
2020/05/12
6880
Excel图表技巧11:使用箭头方向键选择图表元素
有时候,我们需要对特定的图表元素进行操作,例如图表系列、数据标签、图例,等等。在操作前,先要选择要操作的图表元素,通常,我们会直接使用鼠标单击或者使用鼠标点击两次,例如,对于图表系列来说,单击一次选中整个系列,再单击一次选取特定的点。
fanjy
2021/07/12
1.3K0
Excel图表技巧11:使用箭头方向键选择图表元素
高维数据图表(一)
高维数据在这里泛指高维和多变量数据,它蕴含的数据特征与二维、三维不同空间数据不同。其中,高维是指数据具有多个独立属性,多变量是指数据具有多个相关属性。
python数据可视化之路
2023/02/23
1.5K0
高维数据图表(一)
Excel图表学习54: 给图表数据标签添加表示增加或减少的箭头标记
使用一些技巧,我们可以给图表数据标签添加表示增加或减少的箭头标记,让图表的表现力更加丰富。
fanjy
2019/09/17
4.5K0
Excel图表学习54: 给图表数据标签添加表示增加或减少的箭头标记
Python+matplotlib自定义坐标轴位置、颜色、箭头
使用Python+numpy+matplotlib这样的组合,如果要绘制一条正弦曲线,是很容易的事。例如下面的代码:
Python小屋屋主
2020/04/01
5.8K0
charts: 图表工具
函数 - charts.plot(series, options) - charts.plotasync(series, options) 图表类型 line:直线图 spline:曲线图 area:面积图 areaspline:曲线面积图 arearange:面积范围图 areasplinerange:曲线面积范围图 column:柱状图 columnrange:柱状范围图 bar:条形图 pie:饼图 scatter:散点图 boxplot:箱线图 bubble:气泡图 errorbar:误差线图 fu
谢伟
2018/06/06
1.4K0
商业图表工具推荐,热门商业图表工具有哪些?
在如今的商业环境下,数据分析和可视化是非常重要的一环。不仅可以帮助企业更好地了解自身情况,还能为决策提供有力支持。因此,选择一个好用的商业图表工具对于报表开发人员来说是非常重要的。下面将为大家介绍7款热门商业图表工具,其中第一个是VeryReport商业图表工具。
报表专家
2023/06/08
3970
免费的图表工具
Ajax MGraph 基于 Prototype.js 的 Ajax 图表库,纯 XHTML 和 CSS 实现。
DougWang
2020/02/18
1.6K0
Toast提示工具类
APP开发中我们常用的与用户交互的消息就是Toast 但是Android原生的Toast 比较繁琐, 我们来比较一下
晨曦_LLW
2020/09/25
6470
【图表大师二】 纯Excel图表制作高仿真决策仪表盘
一、什么是仪表盘 仪表盘(guage,speedometer,dial chart,dashboard),是模仿汽车速度表的一种图表,常用来反映预算完成率、收入增长率等比率性指标。它简单、直观,人人会看,是商业面板(Dashboard)最主要特征的图表类型。一看到仪表盘,就会使人体验到决策分析的商务感觉。 在《Excel图表之道》中曾介绍了一种模仿制作仪表盘的方法,其思路是使用饼图+图片填充的方式,需要从水晶易表等软件中抠出空表盘图片,填充到图表的绘图区作为背景。 这种方法虽然简单,
CDA数据分析师
2018/02/23
2.5K0
【图表大师二】 纯Excel图表制作高仿真决策仪表盘
Android高德之旅(4)我的位置
说到吃饭,最近刚开了一家...咳咳,说到位置定位,主要包含两部分,第一个是根据GPS获取经纬度,第二是根据经纬度获取省市区行政区划。先说第一个,使用过地图导航的都知道,定位我的位置通常是一个蓝色的箭头,在地图上移动,我们也来实现这个效果。
大公爵
2018/09/05
1.4K0
Android高德之旅(4)我的位置
pyecharts-2-全局配置项设置
本文中介绍的如何在pyecharts中配置全局组件,在后续的作图中会用到这些全局配置项。
皮大大
2021/03/01
9.7K0
pyecharts-2-全局配置项设置
bootstrap 提示工具 常用样式
<h4>工具提示(Tooltip)插件 - 锚</h4> 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>. 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a> <h4>工具提示(Tooltip)插件 - 按钮</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button> <script>
用户5760343
2019/07/05
7070
bootstrap 提示工具 常用样式
箭头函数
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
清出于兰
2020/10/26
1.2K0
箭头函数
最近在代码中用到大量箭头函数,例如 result = page.stream().map(p -> { //这个p相当于list里的每一项,map需要return Map<String, Object> tempMap = BeanUtil.beanToMap(p); tempMap.put("isMeLikeHisProduct", StringUtils.isNotBlank(master.getUFavorite()) && master.getUFavorite().contain
阿超
2022/08/16
1.1K0
箭头函数
VBA实战技巧24:调整图表数据标签的位置
有时候,在Excel中绘制的图表会出现数据标签重叠的情形,不便于查看,如下图1所示。
fanjy
2021/07/12
2.6K0
VBA实战技巧24:调整图表数据标签的位置
【工具】Excel数据图表制作基础
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
小莹莹
2018/04/25
1.2K0
【工具】Excel数据图表制作基础
箭头函数
今天我来总结一下ES6 对函数做的一些处理。结合我ES5的函数特征,能够让我们根据实际情况,来很好的完成我们的项目需求。
Qwe7
2022/05/14
1K0
高维数据图表(2)——PCA的深入探究
PCA,也就是主成分分析方法,是一种使用最为广泛的数据降维算法。鉴于它的广泛适用性,值得写一篇文章来探讨PCA的应用。主要内容有:
python数据可视化之路
2023/02/23
1.1K0
高维数据图表(2)——PCA的深入探究

相似问题

高图表工具提示位置问题

13

高图表工具提示

11

高图表固相规默认工具提示位置

10

更改工具提示位置/箭头

217

高图表工具提示格式

23
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文