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

时间:2015-03-13 06:00:20

标签: javascript css highcharts

如果您查看我的http://jsfiddle.net/WOUNDEDStevenJones/oe1vcmqj/1/,图表上的红色标签背后会有微妙的白色光晕(至少在Chrome和FF中)。如何消除白光?或者最坏的情况是至少将颜色改为相同的蓝色,以便混合在一起?

我尝试使用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;
                    }
                }
            }
        }
    }

4 个答案:

答案 0 :(得分:71)

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/

答案 1 :(得分:2)

使用text-shadow:none !important;代码tspan

<强> CSS

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

FIDDLE DEMO

答案 2 :(得分:0)

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

答案 3 :(得分:0)

为我工作...

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