Opción de gráfico Highcharts backgroundColor: 'transparente' mostrando negro en IE 8

81

Highchartsopción de gráfico que backgroundColor:'transparent'muestra negro enIE 8

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

Esto funciona bien en I.E 9y otros, pero falla en IE 8 y Safari, ¿alguien tiene idea de por qué?

— Nikshep
fuente

128

Prueba esta solución:

histogram = new Highcharts.Chart({
                chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                         backgroundColor:'rgba(255, 255, 255, 0.0)'
                }

— Mayuresh
fuente

No es del todo transparente. La caja se ve claramente. La respuesta de nessa.gp funcionó para mí.

— Adrian Bartholomew

26

Esa es una solución. Funciona mejor con backgroundColor:null.

— ViniciusPires

Gracias por su ayuda :)

— russellhoff

3

backgroundColor: 'rgba (255, 255, 255, 0.0)' le dará una transparencia completa

— neo

2

Null ya no funciona en HighCharts 6. Utilice backgroundColor: 'transparente' en su lugar. (Probado en todos los navegadores modernos e IE11 +).

— Stevethemacguy

132

¿Puedes probar esto?

backgroundColor: null

Ver en: jsfiddle

— Bhesh Gurung
fuente

7

La respuesta de Mayuresh es una buena alternativa, pero esto también funciona y se ve más limpio.

— Capy

4

¡Perfecto! Si solo tuviera 10 votos positivos para dar :) Esta es sin duda la solución correcta, elegante, que no es un truco.

— Kato

4

Estoy de acuerdo; probablemente esta debería ser la mejor respuesta.

— Geoff

Su violín está roto ahora que Highcharts ha movido el archivo .js al que está vinculado. Como se mencionó en otra parte, null no siempre funcionará. La respuesta de nessa.gp proporciona los mejores valores de caso para cada navegador, como lo descubrieron los propios Highcharts.

— Colt McCormack

también soluciona el problema de whkhtmltopdf con fondo negro.

— Rostyslav Diachok

9

Encontré esto en fuentes de Highcharts:

Opacidades empíricas más bajas posibles para TRACKER_FILL

IE6: 0,002

IE7: 0,002

IE8: 0,002

IE9: 0.00000000001 (ilimitado)

IE10: 0.0001 (solo exportación)

FF: 0.00000000001 (ilimitado)

Cromo: 0.000001

Safari: 0.000001

Opera: 0.00000000001 (ilimitado)

TRACKER_FILL = 'rgba (192,192,192,' + (hasSVG? 0.0001: 0.002) + ')'

Por lo tanto, puede establecer el color de fondo del gráfico en 'rgba (255,255,255,0.002)' y se ejecuta en los navegadores más importantes.

— nessa.gp
fuente

2

backgroundColor: 'transparent' También funciona si necesita tipo de seguridad.

— Attila Csányi
fuente

0

Si puede acceder al archivo highcharts.js, vaya a la línea backgroundColor (alrededor de 479) y cambie la línea como backgroundColor:"rgba(255, 255, 255, 0)". Cambiará todos los fondos de los gráficos a transparentes

— GrooveNow
fuente

1

Y luego tendrá que hacerlo cada vez que actualice la biblioteca.

— guioconnor

-2

Puede ser que tengas que escribir

filter:0 !important;

en tu css.

— sandeep
fuente

-2

backgroundColor:'rgba(255, 255, 255, 0.0)',

— Pankaj Upadhyay
fuente

1

Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y es posible que esas personas no conozcan los motivos de su sugerencia de código.

— Clijsters