Highcharts-Diagrammoption backgroundColor: 'transparent' zeigt Schwarz in IE 8 an

80

HighchartsDiagrammoption backgroundColor:'transparent'zeigt Schwarz anIE 8

histogram = new Highcharts.Chart({
            chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                     backgroundColor:'transparent'
            }

Dies funktioniert gut auf I.E 9und andere, schlägt aber auf IE 8 und Safari fehl. Hat jemand eine Idee warum?

css internet-explorer-8 cross-browser highcharts Nikshep
quelle

Antworten:

127

Versuchen Sie diese Lösung: 

histogram = new Highcharts.Chart({
                chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                         backgroundColor:'rgba(255, 255, 255, 0.0)'
                }
Mayuresh
quelle
Ist nicht ganz transparent. Die Box ist deutlich zu sehen. Die Antwort von nessa.gp hat bei mir funktioniert.
Adrian Bartholomew
26
Das ist eine Problemumgehung. Funktioniert besser mit backgroundColor:null.
ViniciusPires
Vielen Dank für Ihre Hilfe :)
Russellhoff
3
backgroundColor: 'rgba (255, 255, 255, 0.0)' gibt Ihnen vollständige Transparenz
neo
2
Null funktioniert in HighCharts 6 nicht mehr. Verwenden Sie stattdessen backgroundColor: 'transparent'. (Getestet auf allen modernen Browsern und IE11 +).
Stevethemacguy
132

Kannst du das versuchen -

backgroundColor: null

Siehe auf: jsfiddle

Bhesh Gurung
quelle
7
Mayureshs Antwort ist eine gute Alternative, aber das funktioniert auch und sieht sauberer aus.
Capy
4
Perfekt! Wenn ich nur 10 positive Stimmen hätte :) Dies ist sicherlich die richtige, elegante Lösung, die kein Hack ist.
Kato
4
Genau; Dies sollte wahrscheinlich die beste Antwort sein.
Geoff
Ihre Geige ist jetzt kaputt, da Highcharts die von Ihnen verknüpfte .js-Datei verschoben hat. Wie an anderer Stelle erwähnt, funktioniert null nicht immer. Die Antwort von nessa.gp gibt die besten Fallwerte für jeden Browser an, wie von Highcharts selbst festgestellt.
Colt McCormack
Es behebt auch das Problem whkhtmltopdf mit schwarzem Hintergrund.
Rostyslav Diachok
9

Ich habe dies in Highcharts-Quellen gefunden:

Empirisch niedrigstmögliche Opazitäten für TRACKER_FILL

  • IE6: 0,002
  • IE7: 0,002
  • IE8: 0,002
  • IE9: 0,00000000001 (unbegrenzt)
  • IE10: 0,0001 (nur Exportieren)
  • FF: 0,00000000001 (unbegrenzt)
  • Chrome: 0,000001
  • Safari: 0,000001
  • Opera: 0.00000000001 (unbegrenzt)

TRACKER_FILL = 'rgba (192, 192, 192,' + (hasSVG? 0,0001: 0,002) + ')'

Sie können also die Hintergrundfarbe des Diagramms auf "rgba (255,255,255,0,002)" setzen und sie wird in den wichtigsten Browsern ausgeführt.

nessa.gp
quelle
2

backgroundColor: 'transparent' Funktioniert auch, wenn Sie Typensicherheit benötigen.

Attila Csányi
quelle
0

Wenn Sie auf die Datei highcharts.js zugreifen können, wechseln Sie in die Zeile backgroundColor (ca. 479) und ändern Sie die Zeile wie backgroundColor:"rgba(255, 255, 255, 0)". Alle Hintergründe der Diagramme werden transparent

GrooveNow
quelle
1
Und dann müssen Sie dies jedes Mal tun, wenn Sie die Bibliothek aktualisieren.
Guioconnor
-2

Vielleicht musst du schreiben 

filter:0 !important;

in deinem css.

Sandeep
quelle
-2 
backgroundColor:'rgba(255, 255, 255, 0.0)',
Pankaj Upadhyay
quelle
1
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich dabei, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Clijsters