web-dev-qa-db-de.com

Deaktivieren Sie den Hover auf HighCharts

Ich habe ein Tortendiagramm mit der HighCharts-Bibliothek erstellt, und hier ist mein Diagramm:

 // http://jsfiddle.net/t2MxW/20890/

    var chart = new Highcharts.Chart({
        colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        credits: { enabled: false },
        chart: {
               renderTo: 'container',
               backgroundColor: 'rgba(255, 255, 255, 0.1)',
               type: 'pie',
               margin: [0, 0, 0, 0],
               spacingTop: 0,
               spacingBottom: 0,
               spacingLeft: 0,
               spacingRight: 0
        },
        title: { text: null },
        plotOptions: {
               pie: {
                   allowPointSelect: false,
                   size: '100%',
                    dataLabels: { enabled: false }
               }
       },
       series: [{
               showInLegend: false,
               type: 'pie',
               name: 'Pie Chart',
               data: [
                     ['Mobile', 65], // first half of pie
                     ['Other', 35] // second half of pie
               ]
       }]
    });

Aber das Problem ist, dass ich keinen Tooltip mit der Maus darüber zeigen möchte ... 

Kann man den Tooltip im Hover deaktivieren?

25
Vytalyi

Sie müssen das tooltip-Attribut wie folgt auf false setzen:

tooltip: { enabled: false },

jsFiddle here


Hier ist der vollständige Code für Ihren Fall:

var chart = new Highcharts.Chart({
       colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
       credits: { enabled: false },
       tooltip: { enabled: false },
       chart: {
              renderTo: 'container',
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              type: 'pie',
              margin: [0, 0, 0, 0],
              spacingTop: 0,
              spacingBottom: 0,
              spacingLeft: 0,
              spacingRight: 0
       },
       title: { text: null },
       plotOptions: {
              pie: {
                  allowPointSelect: false,
                  size: '100%',
                   dataLabels: { enabled: false }
              }
      },
      series: [{
              showInLegend: false,
              type: 'pie',
              name: 'Pie Chart',
              data: [
                    ['Mobile', 65], // first half of pie
                    ['Other', 35] // second half of pie
              ]
      }]
});
48
lifetimes

Durch Deaktivieren der QuickInfo wird lediglich die QuickInfo deaktiviert. Der Hover-Effekt ist jedoch noch vorhanden. Um den Hover-Effekt zu deaktivieren, fügen Sie Folgendes zu Ihren plotOptions hinzu:

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
56
SergeyB

Sie können alternativ die gesamte Mausverfolgung im Allgemeinen deaktivieren, sowohl Tooltip- als auch Hover-Effekte: 

(Link zum Kopieren und Einfügen) http://api.highcharts.com/highcharts#series . enableMouseTracking

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/

plotOptions: {
    series: {
        enableMouseTracking: false
    }
}
7
ninedozen

Der Titel der Frage bezieht sich auf das Deaktivieren des Schwebens. Wenn sich also jemand zu diesem Zweck hier befindet, werde ich auf @ SergeyBs answer näher eingehen.

Es gibt einige Optionen, die sich darauf auswirken, wie der Mauszeiger das Styling einer Serie ändert. Sie haben je nach Serientyp unterschiedliche Auswirkungen. Ich werde hier über Linien- und Tortenserien sprechen, aber im Allgemeinen können Sie unter plotOptions.<seriesType>.states.hover Nach dem Stil suchen, der auf die aktuell schwebende Serie angewendet wird, und unter plotOptions.<seriesType>.states.inactive Nach dem Stil, der auf die nicht schwebende Serie angewendet wird (z. B. plotOptions.pie.states.hover). Keine dieser Optionen wirkt sich auf das Tooltip-Styling aus.

plotOptions.series.states.inactive

plotOptions.series.states.inactive wirkt sich auf das Styling aller Serien aus, über die gerade kein Mauszeiger gezogen wird. Setzen Sie plotOptions.series.states.inactive.opacity Auf 1, um zu verhindern, dass sie in den Hintergrund treten.

var chartOptions = {
    // ...
    plotOptions: {
        series: {
            states: {
                inactive: {
                    opacity: 1,
                },
            },
        },
    },
}

jsFiddle for line

jsFiddle for pie

plotOptions.series.states.hover

plotOptions.series.states.hover wirkt sich auf das Styling der Serie aus, über die der Mauszeiger bewegt wird. Beispielsweise wird für eine Linienserie standardmäßig die Linienbreite verdickt und ein Lichthof auf den nächstgelegenen Punkt angewendet.

Setzen Sie plotOptions.series.states.hover.enabled Auf false, um die Formatierung einer aktuell schwebenden Zeile zu deaktivieren.

var chartOptions = {
    // ...
    chart: {
        type: "line",
    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false,
                },
            },
        },
    },
}

jsFiddle

Wenn wir dies für eine Tortenreihe festlegen, tritt das schwebende Slice leider zusammen mit den übrigen inaktiven Slices in den Hintergrund (siehe diese - jsFiddle für ein Beispiel). Wenn Sie das gesamte Hover-Styling entfernen möchten, ohne das inaktive Styling zu beeinträchtigen, können Sie plotOptions.series.states.hover.halo.size Auf 0 (wodurch der Halo entfernt wird) und plotOptions.pie.states.hover.brightness Auf 0 (wodurch der Aufhellungseffekt entfernt wird) setzen. Beachten Sie, dass die Helligkeit für Tortenserien spezifisch ist und unter plotOptions. pie anstelle von plotOptions. series dokumentiert wird (obwohl dies auch bei mir funktioniert hat, als ich es hinzufügte unter plotOptions.series).

var chartOptions = {
    // ...
    chart: {
        type: "pie",
    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    halo: {
                        size: 0,
                    },
                    // this worked for me even though it's not
                    // documented under plotOptions.series:
                    //brightness: 0,
                },
            },
        },
        pie: {
            states: {
                hover: {
                    brightness: 0,
                },
            },
        },
    },
}

jsFiddle

plotOptions.series.stickyTracking

Wenn Sie eine Linien- oder Flächenserie verwenden, ist Ihnen möglicherweise aufgefallen, dass sobald Sie mit der Maus über das Diagramm fahren, auch wenn Sie eine Serie nicht berühren, die nächstgelegene Serie ein Hover-Styling erhält und der Rest ein inaktives Styling. Dies liegt daran, dass plotOptions.series.stickyTracking standardmäßig für Linien- und Flächenserien gilt. Wenn Sie plotOptions.series.stickyTracking Auf false setzen, wird das Hover- und Inactive-Styling nur angewendet, wenn Sie den Mauszeiger über eine Linie halten.

var chartOptions = {
    // ...
    chart: {
        type: "line",
    },
    plotOptions: {
        series: {
            stickyTracking: false,
        },
    },
}

jsFiddle

plotOptions.series.enableMouseTracking

Als @ninedozen vermerkt können Sie alle reaktiven Interaktionen basierend auf der Mausbewegung vollständig deaktivieren, indem Sie plotOptions.series.enableMouseTracking Auf false setzen. Beachten Sie, dass dadurch neben dem Hover/Inactive Styling auch QuickInfos deaktiviert werden.

Optionsumfang

Um diese Optionen auf alle Serien im gesamten Diagramm anzuwenden, platzieren Sie sie unter plotOptions.series. Um sie nur auf bestimmte Serientypen anzuwenden (oder wenn die Option für eine bestimmte Serie spezifisch ist), platzieren Sie sie unter plotOptions.<seriesType>. Um sie auf eine bestimmte Serie anzuwenden, platzieren Sie sie in den Optionen dieser Serie.

var chartOptions = {
    series: [
        {
            name: "series1",
            type: "line",
            data: [...],
            // these options will only apply to series1, not series2 or series3
            states: {...},
        },
        {
            name: "series2",
            type: "line"
            data: [...],
        },
        {
            name: "series3",
            type: "pie"
            data: [...],
        }
    ],
    plotOptions: {
        // these options will apply to all series in the chart
        series: {states: {...}},
        // these options will only apply to series of type line
        // i.e. series1 and series2
        line: {states: {...}}
    }
}
5
Galen Long

Sie können sie einfach abschalten, indem Sie Folgendes verwenden:

tooltip: {
    enabled: false       
},
5
SteveP

sie können es einfach deaktivieren, indem Sie die Option einstellen

tooltip:{
   enabled: false
}
2
Strikers

Wie in der akzeptierten Antwort angegeben, müssen Sie festlegen

 tooltip: { enabled: false }

Note - Sie müssen dies als Eigenschaft Ihres Highcharts.Options -Objekts angeben (d. H. Ihr Diagrammoptionsobjekt, nicht eine Eigenschaft Ihrer Serie). Geben Sie entweder in der JSON an, dass Sie das Highcharts.Chart -Objekt übergeben, oder geben Sie es als Eigenschaft eines Highcharts.Options -Objekts an, das Sie explizit erstellen, bevor Sie es übergeben Sie Highcharts.Chart

Siehe https://api.highcharts.com/highcharts/tooltip.enabled

0
Chris Halcrow

Normalerweise deaktiviere ich einfach den Stil in css, damit ich bei Bedarf auf das Hover-Ereignis in JS zugreifen kann ...

.highcharts-tooltip {
    display: none;
}
0
Ben Hall