Добавление цветной рамки (не теневой) в текст ярлыка на карте карт Highcharts

Question

Я бы хотел, чтобы текст ярлыка на моем Highcharts treemap был белым с черной рамкой, чтобы он был непротиворечивым и четко виден на всех цветах. Это возможно? Я играл с параметрами textShadow, и он выглядит хорошо (хотя и не очень хорош) в Chrome, но он выглядит очень непрофессиональным в Internet Explorer. Смотрите скрипку здесь:

https://jsfiddle.net/k1hohozg/4/

$(function() { 
    $('#container').highcharts({ 
     title: "", 
     series: [{ 
      type: "treemap",    
      data: [ 
      { 
       name: 'Name One', 
       value: 20, 
       color: "#FFFF00" 
      }, { 
       name: 'Name Two', 
       value: 20, 
       color: '#000099', 
      }, { 
       name: 'Name Three', 
       value: 1, 
       color: '#007799', 
      }, { 
       name: 'Name Four', 
       value: 1, 
       color: '#FFCC00', 
      } 
      ], 

      levels: [{ 
       level: 1, 
       dataLabels: { 
        enabled: true, 
        align: 'center', 
        style: { 
         fontSize: '20px', 
         color: '#FFFFFF', 
         textShadow: "0 0 3px #000, 0 0 3px #000", 
        } 
       }, 
      }], 
     }], 
    }); 
}) 

Я не хочу, чтобы использовать опцию «Контраст», потому что мне нужно весь текст, чтобы выглядеть так же, следовательно, белого цвета с черной окантовкой. Каков наилучший способ сделать это лучше во всех стандартных браузерах?

Спасибо!

Answer 1

Там нет Highcharts по умолчанию путь для работы с IE-рендерингом плохой текстовой тени. Можно установить useHTML в true и добавить несколько ярлыков, которые будут имитировать тень. (Отлично выглядит в Chrome, Firefox и IE11).

Пример: http://jsfiddle.net/yzLavxc9/2/

.... 
dataLabels: { 
        useHTML: true, 
        formatter: function() { 
         return '<div class=dataLabelContainer><div style="position: absolute; top: -1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: -1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; color: #fff;">'+this.key+'</div></div><div style="color: #fff;">'+this.key+'</div></div>'; 
        }, 
        enabled: true, 
        align: 'center', 
        style: { 
         fontSize: '20px', 
.... 

Answer 2

Я думаю, что это невозможно с текстом textShadow, который неправильно интерпретируется IE. Однако вы можете добавить фон на ярлыках, чтобы быть более заметным:

$(function() { 
 
    $('#container').highcharts({ 
 
    title: "", 
 
    series: [{ 
 
     type: "treemap", 
 
     data: [{ 
 
     name: 'Name One', 
 
     value: 1, 
 
     color: "#FFFF00" 
 
     }, { 
 
     name: 'Name Two', 
 
     value: 1, 
 
     color: '#000099', 
 
     }], 
 
     levels: [{ 
 
     level: 1, 
 
     dataLabels: { 
 
      enabled: true, 
 
      align: 'center', 
 
      borderRadius: 5, 
 
      backgroundColor: 'rgba(255, 255, 255, 1)', 
 
      style: { 
 
      fontSize: '20px', 
 
      color: '#000', 
 
      } 
 
     }, 
 
     }], 
 
    }], 
 
    }); 
 
})

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/treemap.js"></script> 
 

 
<div id="container"></div>

Вы можете вдохновить себя из документации:

http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.backgroundColor