是否删除highcharts数据标签上的阴影/背景光晕？

8ehkhllq 于 2022-11-10 发布在 Highcharts

关注(0)|答案(5)|浏览(166)

如果你看看我的http://jsfiddle.net/WOUNDEDStevenJones/oe1vcmqj/1/，图表上的红色标签后面有一个微妙的白色（至少在Chrome和FF中）。我如何消除白光？或者最坏的情况下，至少改变颜色为相同的蓝色，使其融入？
我尝试过使用shadow、backgroundColor和其他来自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;
                    }
                }
            }
        }
    }

highcharts

来源：https://stackoverflow.com/questions/29025789/remove-shadow-background-glow-on-highcharts-data-label

5条答案

按热度按时间

7bsow1i61#

将dataLabels.styles.textShadow设定为false。

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

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

编辑：

自Highcharts 5.0.3起，选项名称为textOutline。

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

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

编辑2.0版：

从Highcharts 5.0.13开始，textOutline选项应该是string，因此要禁用大纲，请设置textOutline: 'none'。

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

演示：http://jsfiddle.net/BlackLabel/s7ejvhmu/

赞(0）回复(0）举报 2022-11-10

pw136qt22#

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

赞(0）回复(0）举报 2022-11-10

1tuwyuhd3#

将text-shadow:none !important;用于标记tspan

CSS格式

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

FIDDLE DEMO

赞(0）回复(0）举报 2022-11-10

bqujaahr4#

为我工作...

dataLabels: {
                enabled: true,
                color: 'white',
                style: {
                    // textShadow: false 
                    textOutline: false
                }

赞(0）回复(0）举报 2022-11-10

ntjbwcob5#

在1.4.0版中
使用了