vermeiden Tooltip Verbindungslinie in einem HighCharts Scatterplot

Question

Betrachten Sie die folgende 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(); 
}); 

einen Datenpunkt Schwebend, scheint es eine Linie mit seinem Tooltip verbindet. Wenn ich die letzte Zeile (var chart=$('#container').highcharts();) kommentiere, verschwindet die Verbindungslinie, aber ich muss das Diagramm instanzieren. Kann eine solche Verbindungslinie vermieden werden?

Answer 1

Sie können die shape Ihrer tooltip einstellen.

Standardmäßig ist die Form callout, was den Zeiger vom Tooltip zum Datenpunkt ergibt.

Wenn Sie die Form square stattdessen setzen, werden Sie die Verbindungslinie nicht haben:

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

Aktualisiert Fiddle:

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

Dies vermeidet die border ändern oder shadow Eigenschaften, so dass Sie diese Elemente beliebig gestalten können .

Answer 2

ich in der Tooltip ändern die Form dies rect.Check:

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

Answer 3

Wir Tooltip Verknüpfung von Setup diese zwei Eigenschaft shadow: false, und borderWidth: 0, innen Tooltip vermeiden.

Bitte beziehen Sie sich auf diese jsfiddle.