web-dev-qa-db-fra.com

Supprimer l’ombre/l’arrière-plan de l’étiquette de données Highcharts?

Si vous consultez mon http://jsfiddle.net/WOUNDEDStevenJones/oe1vcmqj/1/ , les étiquettes rouges du graphique ont une subtile lueur blanche derrière elles (au moins en chrome et en ff). Comment puis-je supprimer cette lueur blanche? Ou pire cas au moins changer la couleur au même bleu pour qu'il se confonde?

J'ai essayé d'utiliser shadow, backgroundColor et d'autres propriétés de leur API ( http://api.highcharts.com/highcharts#plotOptions.column.dataLabels ), mais je ne peux pas comprendre ce qui définit cette lueur derrière le texte rouge. 

plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                color: 'red',
                inside: false,
                xHigh: -45,
                xLow: -9999999,
                shadow: "#ff0000",
                formatter: function () {
                    if (this.point.high) {
                        var myDate = new Date(this.y);
                        var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth(),myDate.getUTCDate());
                        return '<b>' + Highcharts.dateFormat('%m/%e',newDateMs) + '</b>';
                    } else {
                        return null;
                    }
                }
            }
        }
    }
javascriptcsshighcharts
20
WOUNDEDStevenJones

Définissez dataLabels.styles.textShadow sur false.

    plotOptions: {
        columnrange: { // or general options: "series: { ... }"
            dataLabels: {
                enabled: true,
                color: 'red',
                style: {
                    textShadow: false 
                }
            }
        }
    },

Démo: http://jsfiddle.net/oe1vcmqj/2/

MODIFIER:

Depuis Highcharts 5.0.3, le nom de la propriété est textOutline.

    plotOptions: {
        columnrange: { // or general options: "series: { ... }"
            dataLabels: {
                enabled: true,
                color: 'red',
                style: {
                    textOutline: false 
                }
            }
        }
    },

Démo: http://jsfiddle.net/oe1vcmqj/49/

70
Paweł Fus

utilisez text-shadow:none !important; pour le tag tspan

CSS

tspan{
    text-decoration:none;
    text-shadow:none !important;
}

FIDDLE DEMO

2
Sajad Karuthedath
dataLabels: {
      enabled: true,
      format: '{point.y}',
       style: {
          textOutline: false 
           }
        },
0
Pankaj Upadhyay