Пироги Highcharts обрисовывают в общих чертах помутнение, используя стиль

Question

При использовании стилизованного режима метки разделов круговой диаграммы больше не имеют текстового контура. Это отличается от нестилевого режима, в котором он есть. Конкретный класс CSS, который управляет этим, называется «highcharts-text-outline». Текстовый элемент не отображается в стилизованном режиме (и, следовательно, нет контура для стиля).

Два примера:

Режим без стилей (обратите внимание на белый контур на текстовых метках): https://codepen.io/rpoconn/pen/QrGaxw

    Highcharts.chart('container', {

  title: {
    text: 'Highcharts pie chart'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    type: 'pie',
    allowPointSelect: true,
    keys: ['name', 'y', 'selected', 'sliced'],
    size: "100%",
    innerRadius: "60%",
    data: [
      ['Apples', 29.9, false],
      ['Pears', 71.5, false],
      ['Oranges', 106.4, false],
      ['Plums', 129.2, false],
      ['Bananas', 144.0, false],
      ['Peaches', 176.0, false],
      ['Prunes', 135.6, false],
      ['Avocados', 148.5, false]
    ],
    showInLegend: true
  }, {
    type: 'pie',
    innerRadius: "0%",
    size: "60%",
    allowPointSelect: true,
    keys: ['name', 'y', 'selected', 'sliced'],
    data: [
      ['Apples2', 2*29.9, false],
      ['Pears2', 2*71.5, false],
      ['Oranges2', 2*106.4, false],
      ['Plums2', 2*129.2, false],
      ['Bananas2', 144.0, false],
      ['Peaches2', 176.0, false],
      ['Prunes2', 3*135.6, false],
      ['Avocados2', 4*148.5, false]
    ],
    showInLegend: true
  }]
});

Стилизованный режим (тот же код, что и выше, но использует / js / highcharts + the highcharts.scss lib): https://codepen.io/rpoconn/pen/mLOpLQ

Кто-нибудь знает способ обойти это? Это ошибка? Могу ли я использовать highcharts-data-label-box :: after здесь и взломать один из них? Есть ли более чистый способ? Я использую HC 6.1 и стандартные стили highcharts.scss.

Answer 1

Для кодов 1:

Добавить следующее:

tspan {
  stroke: none;
}

или для контура

tspan {
  stroke: white;
}

Codepen 2 требует использования обходного пути с использованием тени текста:

.highcharts-data-label text {
    fill: #333333;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

Это должно сделать работу.