【问题标题】:Highcharts - How to remove connecting line between fixed tooltip and pointHighcharts - 如何删除固定工具提示和点之间的连接线
【发布时间】:2017-03-03 14:38:26
【问题描述】:

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

这主要在带有固定工具提示的图表上很明显。

有谁知道如何在不删除工具提示本身边框的情况下删除此行?

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

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

这也影响了我可以看到的条形图和树形图,并且我搜索文档无济于事。

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

提前致谢。

【问题讨论】:

    标签: highcharts bar-chart highstock treemaps


    【解决方案1】:

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

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

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

    【讨论】:

      【解决方案2】:

      接受的答案仅在 Highstock 中部分有效。音量和指示器工具提示的连接器被抑制了,但我仍然有一个从 DateTime 框到十字准线的连接器。

      作为 shape: 'rect' hack 的替代方法,您可以尝试:

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

      这些拆分:和共享:设置将所有工具提示框合并到一个框中。如果这满足您的需求,它似乎可以解决连接器问题。

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-01-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-10-20
        • 1970-01-01
        相关资源
        最近更新 更多