Highcharts tooltip erhalten Sie position und Klasse ändern
Habe ich einen tooltip, dass ich gestylt mit HTML und headerFormat etc., etwa so:
tooltip: {
useHTML: true,
valueDecimals: 2,
backgroundColor: 'none',
borderColor: '#c0c0c0',
borderRadius: 0,
borderWidth: 0,
xDateFormat: '%d %b %y',
headerFormat: '<div class="chart-tooltip"><span class="tooltip-header">{point.key}</span><br><div class="markers"><span class="tooltip-bg"></span>',
pointFormat: '<span class="tooltip-marker" style="background: {series.color};"></span>' +
'<span class="tooltip-series" style="color: {series.color};">{point.y}</span><br>',
footerFormat: '</div></div>',
animation: false,
shadow: false,
style: {
padding: '0px'
}
}
Durch die Verwendung der Klassen habe ich dann stylte die tooltip mit meiner externen CSS-Datei. Dies funktioniert gut, außer für ein problem, der tooltip sieht wie folgt aus:
So das problem ist, wenn das Fadenkreuz ist auf der linken Seite des Diagramms angezeigt, und der tooltip geht über rechts und der Pfeil auf der falschen Seite.
Ist es möglich zu wissen, wenn der tooltip wechselt die Seiten, und fügen Sie eine Klasse entsprechend? So kann ich dann anpassen, der Stile.
Jede Hilfe wäre toll, danke.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin mir nicht sicher, ob dies würde helfen, Sie, aber Sie können es überprüfen:
Überprüfen Sie die API von tooltip->positioner: tooltip.Stellungsregler-API (wenn Sie mit highstock Sie es auch benutzen kann)
Die Standard-QuickInfo für highcharts ist (highcharts.js):
Fand ich dies hier erklären: Highcharts tooltip immer auf der rechten Seite des cursor, so können Sie prüfen, und spielen mit dieser option.
Dies zeigt tool-tip an der linken Ecke des hohen charts:
Benutzer unter