Highcharts - 如何删除固定工具提示和点之间的连接线

时间:2017-03-03 14:38:26

标签: highcharts bar-chart highstock treemaps

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

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

有没有人知道如何删除此行而不删除工具提示本身的边框?

我想出了一个解决方法,包括将工具提示的边界宽度设置为0,并使用useHTML:true并禁用阴影为工具提示添加一个圆形的,有边框的彩色div。

虽然我不想为每张图表都这样做,因为它看起来有点令人讨厌。

这也会影响我可以看到的条形图和树形图,而且我拖网文件也无济于事。

Connecting Line

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]
}]
});

提前致谢。

2 个答案:

答案 0 :(得分:3)

默认情况下,工具提示的形状设置为一个标注,其中有一个指向该点的V形符号/线条。您可以将工具提示的形状更改为,例如矩形 - 没有任何连接器。

size(200, 200);
String[] fontList = PFont.list();
printArray(fontList);

示例:http://jsfiddle.net/bqw4bc4x/2/

答案 1 :(得分:0)

已接受的答案仅在Highstock中有效。音量和指标工具提示的连接器已被取消,但从DateTime框到十字线的连接器仍然存在。

作为“ rect” hack的替代形式,您可以尝试:

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

这些split:和shared:设置将所有工具提示框合并为一个框。只要满足您的需求,似乎就可以解决连接器问题。

Highcharts非常奇怪的设计决定。这些连接器在视觉上具有很高的侵入性,我无法想象许多设计师会想要使用它们,但是您只能通过破解来禁用它们。他们在想什么?