highcharts - 如何在highcharts x-range中将工具提示放在点上方?
问题描述
我已经创建了一个类别中包含多个系列的 highcharts x-range 图表。工具提示显示在类别的中间上方。我希望它显示在每个 x 范围点上方。我该怎么做?
我试图覆盖工具提示定位器。但是参数点包含值 plotX 和 plotY 就像它放在 y 值的中间一样,我无法计算它的实际位置。
this.tooltipPositioner = function(labelWidth, labelHeight, point){
return {
x: point.plotX,
y: point.plotY
};
};
解决方案
您可以使用tooltip.positioner
但不是参数点,您可以使用悬停点对象,您将在其中找到正确的点图值。要获得悬停的点对象,请使用plotOptions.series.point.events.mouseOver
回调。检查下面发布的代码和演示:
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
JS:
var hoveredPoint;
var chart = Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
tooltip: {
positioner: function(labelWidth, labelHeight) {
var x = hoveredPoint.shapeArgs.x,
y = hoveredPoint.shapeArgs.y,
width = hoveredPoint.shapeArgs.width,
tooltipOffsetTop = -10;
return {
x: x + chart.plotLeft + width / 2 - labelWidth / 2,
y: y + chart.plotTop - labelHeight + tooltipOffsetTop
}
}
},
plotOptions: {
xrange: {
point: {
events: {
mouseOver: function() {
hoveredPoint = this;
},
mouseOut: function() {
hoveredPoint = null;
}
}
}
}
},
series: [{
name: 'Project 1',
// pointPadding: 0,
groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
},
{
name: 'Project 2',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 23),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}],
dataLabels: {
enabled: true
}
}
]
});
推荐阅读
- html - 为什么 CSS Flex-box 没有包裹一半的项目?
- javascript - 在 wordpress 上隐藏菜单
- javascript - 无法解析 JSON 文件
- php - (php) 根据表单输入创建链接并将其传递给 iframe 源
- javascript - 为什么`@babel/transform-runtime` 不为 Edge 18 填充`string.replace`?
- python - Pandas 列名分为两个级别
- hacklang - 将 darray 存储到 Shape 时出现不一致的错误
- django - Pytest scope='module' 测试模块后不删除模型实例
- php - foreach 循环正在回显第一次提交的结果
- python - 使用 scrapy 重定向 strava.com 中的授权问题。日志说 strava 将我从 /login 重定向到 /login