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

Posted 2023-05-07

【中文标题】删除 highcharts 数据标签上的阴影/背景发光？

【英文标题】：Remove shadow/background glow on highcharts data label?

【发布时间】：2015-05-15 13:18:52

【问题描述】：

如果您查看我的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;
                    
                
            
        
    

【问题讨论】：

试试 text-shadow:none;

【参考方案1】：

将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/

【讨论】：

我遇到了同样的问题，发现演示小提琴在数据标签后面仍然有白光。类似的问题也可以在jsfiddle.net/2qrybqgn 中找到。也许highcharts 5 中的情况发生了变化？

你是对的。该名称刚刚更改（5.0.3-> 更改日志），请参阅上面的编辑。谢谢！

我们可以将这个选项全局设置到所有图表吗？我尝试在 Highcharts.setOptions 中使用它，但没有成功。

是的，你可以，你能举例说明你尝试了什么吗？应该是简单的plotOptions.series.dataLabels.style.textOutline。

工作，谢谢。我使用的是 plotOptions.columnrange 而不是 plotOptions.series。

【参考方案2】：

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

【参考方案3】：

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

CSS

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

FIDDLE DEMO

【讨论】：

顺便说一句，这是一个有效的解决方案，但我认为有人否决了它，因为它不是 Highcharts 解决方案，并且通常不赞成使用!important（这意味着可能有更好的方法来实现这一点，并不是说!important 不是一个有用的选项）

@WOUNDEDStevenJones !important 被添加为 CSS 属性，以便在必要时使用它，因为高音或图表仅在某些页面中使用，而 tspan 通常不使用，！important 用法在这里有效..!!有些人只是在他们看到 !important 的地方投反对票。

我知道，我支持你。我只是在发表评论，以便其他看到这个问题的人意识到这仍然有效并且是一个有效的选择，即使有人出于未知原因否决了这个答案

【参考方案4】：

为我工作...

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

【讨论】：

这与接受的答案相同：***.com/a/52530807/1499877

我正在尝试使用“// textShadow: false”，但那个“textOutline: false”对我有用。

接受的答案列出了textShadow: false 和textOutline: false，具体取决于Highcharts 版本