Javascript 删除高图数据标签上的阴影/背景光晕?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29025789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:46:00  来源:igfitidea点击:

Remove shadow/background glow on highcharts data label?

javascriptcsshighcharts

提问by WOUNDEDStevenJones

If you check out my http://jsfiddle.net/WOUNDEDStevenJones/oe1vcmqj/1/, the red labels on the chart have a subtle white glow behind them (in at least Chrome and FF). How do I remove that white glow? Or worst case at least change the color to the same blue so it blends in?

如果你查看我的http://jsfiddle.net/WOUNDEDStevenJones/oe1vcmqj/1/,图表上的红色标签在它们后面有一个微妙的白光(至少在 Chrome 和 FF 中)。怎么去掉那个白光?或者在最坏的情况下至少将颜色更改为相同的蓝色以便混合?

I've tried using shadow, backgroundColor, and other properties from their API (http://api.highcharts.com/highcharts#plotOptions.column.dataLabels), but can't figure out what is defining that glow behind the red text.

我已经尝试使用shadowbackgroundColor以及从他们的API其他属性(http://api.highcharts.com/highcharts#plotOptions.column.dataLabels),但无法弄清是怎么定义的红色文字背后的光芒。

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;
                    }
                }
            }
        }
    }

回答by Pawe? Fus

Set dataLabels.styles.textShadowto false.

设置dataLabels.styles.textShadowfalse

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

Demo: http://jsfiddle.net/oe1vcmqj/2/

演示:http: //jsfiddle.net/oe1vcmqj/2/

EDIT:

编辑

Since Highcharts 5.0.3, the property name is textOutline.

自 Highcharts 5.0.3 起,属性名称为textOutline.

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

Demo: http://jsfiddle.net/oe1vcmqj/49/

演示:http: //jsfiddle.net/oe1vcmqj/49/

回答by Sajad Karuthedath

use text-shadow:none !important;for the tag tspan

使用text-shadow:none !important;的标签tspan

CSS

CSS

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

FIDDLE DEMO

小提琴演示

回答by Pankaj Upadhyay

dataLabels: {
      enabled: true,
      format: '{point.y}',
       style: {
          textOutline: false 
           }
        },