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

问题描述 投票:0回答:6

如果您查看我的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;
                    }
                }
            }
        }
    }
javascript css highcharts
6个回答
94
投票

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/

编辑v2.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/


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

2
投票

使用

text-shadow:none !important;
作为标签
tspan

CSS

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

小提琴演示


1
投票

为我工作...

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

0
投票

1.4.0版本中

使用

dataLabels: {
  dropShadow: false
}

0
投票

在1.6.0版本中

使用

 dataLabels: {
        dropShadow: {
            enabled: false,
        }
    },
     
© www.soinside.com 2019 - 2024. All rights reserved.