避免在 HighCharts 散点图中使用工具提示链接线

Question

考虑以下 script：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
        },
        plotOptions: {
            scatter: {
                lineWidth:1,
                marker: {
                    radius: 1,
                    symbol:'circle',
                    fillColor: '#800000'
                },
            }
        },
  tooltip: {
            enabled:true,
            formatter: function() {
            return "<b>"+this.y+"</b>";
                },
        positioner: function () {
            return { x: 80, y: 50 };
        },
        },
    series: [{
        name: 'A',
        color: "#b0b0b0",
        data: [[38,42],[39,39],[35,45],[35,54],{x:36,y:35}]
        }, {
        name: 'B',
        color: "#b0b0b0",
        data: [[46,56],[47,67],[48,69],[50,55],{x:52,y:57}]
    }]
});
var chart=$('#container').highcharts();
});

将鼠标悬停在数据点上，会出现一条线，将其与其工具提示相链接。如果我评论最后一行 (var chart=$('#container').highcharts();)，链接线就会消失，但我需要实例化图表。是否可以避免这样的链接线？

Answer 1

我将工具提示内部的形状更改为 rect.Check 这个：

$(function () {
 $('#container').highcharts({
  chart: {
   type: 'scatter',
  },
  plotOptions: {
   scatter: {
    lineWidth:1,
    marker: {
     radius: 1,
     symbol:'circle',
     fillColor: '#800000'
    },
   }
  },
  tooltip: {
   enabled:true,
           positioner: function () {
            return { x: 38, y: 43 };
        },
        backgroundColor: 'rgba(255,255,255,0.8)',
        shape: 'rect'
        },
 series: [{
  name: 'A',
  color: "#b0b0b0",
  data: [[38,42],[39,39],[35,45],[35,54],{x:36,y:35}]
  }, {
  name: 'B',
  color: "#b0b0b0",
  data: [[46,56],[47,67],[48,69],[50,55],{x:52,y:57}]
 }]
});
var chart=$('#container').highcharts();
});

Answer 2

我们可以通过在工具提示中设置这两个属性 shadow: false, 和 borderWidth: 0, 来避免工具提示链接。

请参考这个jsfiddle。

Answer 3

您可以设置 tooltip 的 shape。

默认情况下，形状为 callout，这导致从工具提示到数据点的指针。

如果将形状设置为 square，则不会有连接线：

tooltip: {
  enabled: true,
  shape: 'square',
  formatter: function() {
    return "<b>" + this.y + "</b>";
  },
  positioner: function() {
    return {
      x: 80,
      y: 50
    };
  },
}

已更新Fiddle：

http://jsfiddle.net/jlbriggs/1wfotmoa/26/

这避免了更改 border 或 shadow 属性，因此您可以随意设置这些元素的样式。

避免在 HighCharts 散点图中使用工具提示链接线

avoid tooltip linking line in a HighCharts scatterplot

jquery

tooltip

scatter-plot

highcharts