删除highcharts数据标签上的阴影/背景发光？ [英] Remove shadow/background glow on highcharts data label?

问题描述

如果您查看我的 http://jsfiddle.net/WOUNDEDStevenJones/oe1vcmqj/1/，图表上的红色标签在背后有微妙的白色光晕（至少在Chrome和FF中）。我如何去除白光？或者最坏的情况下，至少改变颜色为相同的蓝色，所以它混合？

我试过使用阴影， backgroundColor 以及其他API的属性（ http://api.highcharts.com/highcharts#plotOptions.column.dataLabels ），但无法弄清楚红色文本背后的光芒是如何定义的。

  plotOptions：{
列宽：{
 dataLabels：{
启用：true，
 color：'red'，
里面：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; 
} 
} 
} 
} 
} 
  

dataLabels.styles.textShadow 设置为 false 。 / p>

  plotOptions：{
 columnrange：{//或常规选项：series：{...}
 dataLabels：{
 enabled：true，
 color：'red'，
 style：{
 textShadow：false 
} 
} 
} 
}，
  

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

编辑：

由于Highcharts 5.0.3，属性名称是 textOutline 。

  plotOptions：{
 columnrange：{//或一般选项：series：{...}
 dataLabels：{
 enabled：true，
 color：'red'，
 style：{
 textOutline：false 
} 
} 
} 
}，
  

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

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?

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.

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

解决方案

Set dataLabels.styles.textShadow to false.

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

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

EDIT:

Since Highcharts 5.0.3, the property name is textOutline.

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

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

这篇关于删除highcharts数据标签上的阴影/背景发光？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！