2015-03-13 2 views
17

Если вы посмотрите мой 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; 
        } 
       } 
      } 
     } 
    } 
+0

попытка текста тень: нет; – Math3w

ответ

59

Установите dataLabels.styles.textShadow в false.

plotOptions: { 
     columnrange: { 
      dataLabels: { 
       enabled: true, 
       color: 'red', 
       style: { 
        textShadow: false 
       } 
      } 
     } 
    }, 

Демо: http://jsfiddle.net/oe1vcmqj/2/

EDIT:

С Highcharts 5.0.3, имя свойства textOutline.

plotOptions: { 
     columnrange: { 
      dataLabels: { 
       enabled: true, 
       color: 'red', 
       style: { 
        textOutline: false 
       } 
      } 
     } 
    }, 

Демо: http://jsfiddle.net/oe1vcmqj/49/

+0

Я столкнулся с одним и тем же вопросом и обнаружил, что демо-скрипт по-прежнему имеет белое свечение метки данных. Аналогичную проблему можно найти и в http://jsfiddle.net/2qrybqgn/. Может быть, что-то изменилось в highcharts 5? –

+0

Вы правы. Это имя было просто изменено (5.0.3-> changelog), см. Выше. Благодаря! –

+0

Спасибо за обновление этого –

1

использование text-shadow:none !important; для тега tspan

CSS

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

FIDDLE DEMO

+0

Это, кстати, действительное решение, но я думаю, что кто-то его понизил, потому что это не решение Highcharts, и использование '! Important', как правило, неодобрительно (это означает, что, вероятно, лучший способ выполнить это, а не это'! Important' не является полезным вариантом) – WOUNDEDStevenJones

+0

@WOUNDEDStevenJones! important добавлен как свойство CSS, чтобы использовать его там, где это необходимо, поскольку высокие harts или диаграммы используются только на определенных страницах, а tspan не используется вообще, важно использовать важное значение здесь .. !! Некоторые люди просто голосуют там, где они видят! Важно. –

+2

Я знаю, я с тобой по этому поводу. Я просто комментирую, так что другие, смотрящие на этот вопрос, понимают, что это все равно будет работать и является допустимым вариантом, даже если кто-то снизит этот ответ по неизвестной причине. – WOUNDEDStevenJones

Смежные вопросы