如何使Highcharts中的渲染标签始终可见,并且相对于单击或悬停的点仍然可见
How to make a rendered label in Highcharts always visible and still relative to the point clicked or hovered over
除了点击时打开的工具提示外,我还需要一个鼠标悬停时打开的不同工具提示。
我试过使用render.lable,但是当标签被渲染时,它有时会离开图表区域,变得不可读。有没有办法使渲染的标签不超出图表区域或图表顶部的位置?
$(function () {
$('#container').highcharts({
title: {
text: 'Highcharts custom label'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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]
}]
}, function (chart) { // on complete
var point = chart.series[0].points[8];
chart.renderer.label('Max observation', 340, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#FFFFFF'
})
.attr({
position: 'absolute',
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 999
})
.add();
});
});
http://jsfiddle.net/54tnht7b/
我会以不同的方式处理这个问题。
对于悬停时需要激活的零件,我会使用工具提示的标准功能,并在单击时使用单独的弹出窗口。
请参阅以下答案以获取示例:
- Highcharts:工具提示单击而不是悬停
chart.renderer.label('Max observation', 340, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#FFFFFF'
})
在此块中,您将标签的位置设置为不在图表上的区域。
chart.renderer.label('Max observation', 250, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#FFFFFF'
})
在这里,它被更改为重新出现在图表上。这是jsfiddle-http://jsfiddle.net/54tnht7b/2/
这就是你想要的吗?
相关文章:
- 对于具有相同类的多个元素,只影响jquery中单击的元素
- 单击时执行操作多个具有相同类的 href
- 单击页面上具有相同类 Javascript 的所有按钮
- 对于每个元素,单击更改值
- 单击注册具有相同类名的多个按钮
- JS/jQuery 代码流 - 将动画与单击函数相结合
- 使用 jQuery 更改单击元素的样式,并从具有相同类的其他元素中删除该样式
- 当元素是父元素时,jQuery 停止所有具有相同类的元素在单击时打开
- jQuery .click 停止所有具有相同类的元素在单击时打开
- 如何在具有相同类的子元素上使用带有 $(this) 的单击函数
- 对于内部具有动画图像的元素,单击事件将丢失
- Dojo:对于网格中的每一行,都有一个按钮,单击该按钮可以显示数据存储中的更多信息
- Jquery-在共享相同类名的其他元素之间选择一个元素(单击时)
- 将单击的元素的ID与json中的关键字相匹配
- 对于动态创建的元素,在没有单击的情况下在执行时调用
- 将选中绑定与包含元素上的单击绑定相结合
- 显示/隐藏或切换具有相同类的多个元素,单击时一次只显示一个
- 单击添加类到具有特定类的元素,并将其从具有相同类的所有其他元素中删除
- 如何禁用右键单击在js/jquery中相同类的所有链接
- 对于动态创建的元素,只绑定一次单击事件