Я меняю dy элементов span в моем коде JS. Когда я изменяю dy в инструментах разработчика Chrome, он выглядит правильно, как на снимке экрана правильного формата с правильными значениями dy:
![](https://i.stack.imgur.com/nC1AE.png)
У меня есть следующий код в js для создания этого эффекта:
var myEle = document.getElementById("dynamicsubtitle1");
myEle && myEle.parentNode.removeChild(myEle);
var chart = this,
rend = chart.renderer,
pie = chart.series[0],
left = chart.plotLeft + pie.center[0],
top = pie.center[1] + 20;
if(!rend.getElementById)
var text = rend.text('<span class="pietitle" style="color:#000; vertical-align:top; text-align:center">' + "Total<br>"
+ '<span class="pietitle" style="color:#000; vertical-align:top; text-align:center" position:"relative" dy="1vw">' + "Incidents<br>"
+ '<span class="piedata" dy="2vw" style="color:#000; text-align:center; vertical-align:top; font-weight:bold">' + this.series[0].total, left, top).attr({
'text-anchor': 'middle',
'id': 'dynamicsubtitle1',
'zIndex': 10
}).addClass('customTitle').add();
Однако получается вот так (Снимок экрана, где dy по умолчанию возвращается к 15)
![](https://i.stack.imgur.com/zQoDE.png)
Я пытался получить тот же эффект в CSS с высотой строки и с полями, но ни один из них, кажется, не применяется, независимо от того, что я пытаюсь. Любой совет будет принята с благодарностью!