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 this：

＆＃13;

$(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();
});

＆＃13;

Answer 2

您可以设置shape的{{1}}。

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

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

square

更新小提琴：

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

这可以避免更改tooltip: { enabled: true, shape: 'square', formatter: function() { return "<b>" + this.y + "</b>"; }, positioner: function() { return { x: 80, y: 50 }; }, }或border属性，因此您可以根据需要自由设置这些元素的样式。

Answer 3

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

请参阅此jsfiddle。

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

3 个答案: