Highcharts - 如何删除固定工具提示和点之间的连接线 [英] Highcharts - How to remove connecting line between fixed tooltip and point

问题描述

我们刚刚更新到最新的Highcharts版本，现在我们的一些图表类型有一条将工具提示连接到这一点的新线。

这主要是显而易见的在带有固定工具提示的图表上。

有谁知道如何在不移除工具提示本身边框的情况下删除这条线？

我已经想出了一个解决方法，包括将工具提示的边框宽度设置为0，并使用useHTML向工具提示添加圆角边框的彩色div：true并禁用阴影。

尽管我不想为每张图表执行此操作，但它似乎有点令人讨厌。

这也影响到我可以看到的酒吧和树形地图，并且我已经将这些文档拖到了一旁。

http://jsfiddle.net/mattscotty/bqw4bc4x/1/

  Highcharts.chart（ 'container'，{
 title：{
 text：'Fixed tooltip'
}，
 
 tooltip：{
 positioner：function（）{
 return {x：80，y：50}; 
}，
 backgroundColor：'rgba（255,255,255,0.8）'，
 
 //在下面取消注释以删除行，但这也删除了工具提示边框
 // borderWidth：0，
 // shadow：false 
}，
 
 xAxis：{
 categories：[ '1月'，'2月'，'3月'] 
}，
 
系列：[{
数据：[29.9,71.5,106.4] 
} ，{
 data：[194.1,95.6,54.4] 
}] 
}）; 
  

预先致谢。

解决方案

默认情况下，工具提示的形状设置为具有指向该点的V形/线条的标注。您可以将工具提示的形状更改为矩形 - 它没有任何连接器。

 工具提示：{
 positioner：function（）{
 return {x：80，y：50}; 
}，
 backgroundColor：'rgba（255,255,255,0.8）'，
 shape：'rect'
  

例如： http://jsfiddle.net/bqw4bc4x/2/

We've just updated to the latest Highcharts version and now a few of our chart types have a new line connecting the tooltip to the point.

It's mainly obvious on charts with fixed tooltips.

Does anyone know how to remove this line without removing the border of the tooltip itself?

I have come up with a work around that involves setting the borderwidth of the tooltip to 0 and adding a rounded, bordered, coloured div to the tooltip using useHTML:true and disabling the shadow.

Though I dont want to do this for every chart as it seems a bit nasty.

This also affects bar and tree maps that I can see and I've trawled the documentation to no avail.

http://jsfiddle.net/mattscotty/bqw4bc4x/1/

Highcharts.chart('container', {
title: {
    text: 'Fixed tooltip'
},

tooltip: {
    positioner: function () {
        return { x: 80, y: 50 };
    },
    backgroundColor: 'rgba(255,255,255,0.8)',

    //Uncomment below to remove line, but this also removes tooltip border
    //borderWidth:0,
    //shadow:false
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar']
},

series: [{
    data: [29.9, 71.5, 106.4]
}, {
    data: [194.1, 95.6, 54.4]
}]
});

Thanks in advance.

解决方案

By default tooltip's shape is set to a callout which has a chevron/line pointing to the point. You can change the tooltip's shape to, e.g. rectangle - which does not have any connector.

tooltip: {
    positioner: function () {
        return { x: 80, y: 50 };
    },
    backgroundColor: 'rgba(255,255,255,0.8)',
    shape: 'rect'

example: http://jsfiddle.net/bqw4bc4x/2/

这篇关于Highcharts - 如何删除固定工具提示和点之间的连接线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！