Highcharts动态工具提示定位

y1aodyip  于 2022-11-10  发布在  Highcharts
关注(0)|答案(3)|浏览(255)

我们正在用Highcharts进行概念验证,所以我需要从另一个系统复制一个图表。另一个系统的图表布局如jsfidle页面所示。我创建了4个轴,并将每个轴定位在前一个轴左侧X像素处。问题是轴1-3的工具提示悬停在轴0上。有没有办法弄清楚我悬停的是哪个轴?或者有没有别的方法来做这个布局?我试着使用定位器功能,哪里都找不到。

positioner: function (boxWidth, boxHeight, point) {
}

JSF空闲示例http://jsfiddle.net/oabg7kjw/

kyvafyod

kyvafyod1#

已知错误报告为here
变通方案(使用定位器):http://jsfiddle.net/oabg7kjw/1/

tooltip: {
    positioner: function(w, h, p) {
        return {
            x: p.plotX + this.chart.hoverSeries.xAxis.left - w/2,
            y: p.plotY
        }
    }
},

文件:-http://api.highcharts.com/highcharts#tooltip.positioner

vhmi4jdf

vhmi4jdf2#

另一个选择是放弃多轴方法,创建一个具有重复类别的方法,然后需要将每个条形图放在适当的类别中。

categories: ['FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13',
             'FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13',
             'FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13',
             'FY 04', 'FY 05', 'FY 06', 'FY 07', 'FY 08', 'FY 09', 'FY 10', 'FY 11', 'FY 12', 'FY 13'],

在您的数据中:

series: [{
    ...
    data: [[0,147], [1,123], [2,139], [3,127], [4,102], [5,116], [6,59], [7,80], [8,72], [9,91]]
}, {
    ...
    data: [[10,154], [11,102], [12,62], [13,77], [14,11], [15,33], [16,227], [17,145], [18,75], [19,101]]
}, {
   etc...

更新了小提琴here

jq6vz3qz

jq6vz3qz3#

虽然这个主题已经很久了,但我发现了另一种解决方法,可以动态地将工具提示垂直或水平居中。7年后,这可能仍然对某些人有帮助:
假设您的容器已插入到项目中,如下所示:

<div #myChart id="myChart" class="graph-container"></div>

然后,您可以使用div本身的宽度或高度将工具提示居中:

....
tooltip: {
        positioner: function () {
          let customXPosition = (document.getElementById('myChart').offsetWidth / 2);
          return { 
            x: customXPosition,
            y: 200 
          };
        },
...

通过使用.offsetHeight,可以对高度(或y轴)使用相同的方法

相关问题