Apex Donut图表居中对齐Total

Question

我想居中对齐(值20/40)，但没有标签，并改变颜色。不幸的是，只有标签可以接受颜色，但仍然不能垂直居中对齐。

var options = {
series: [20,40],
plotOptions: {
pie: {
donut: {
labels: {
show: true,                       
total: {
show: true,
showAlways: true,
label: '',                           
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return `${a}/${b}`
})
}
}
}                   
}
}
},        
colors: ['#0065bd', '#dbecf8'],
chart: {
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#responsive-chart"),
options
);
chart.render();

@import url('https://fonts.googleapis.com/css?family=Poppins');
* {
font-family: 'Poppins', sans-serif;
}
#chart {
max-width: 260px;
margin: 35px auto;
opacity: 0.9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js" integrity="sha512-yhdujT21BI/kqk9gcupTh4jMwqLhb+gc6Ytgs4cL0BJjXW+Jo9QyllqLbuluI0cBHqV4XsR7US3lemEGjogQ0w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="chart">
<div id="responsive-chart"></div>
</div>

Answer 1

您可以通过更改plotOptions中的offsetY来居中值。你也可以改变这里的color。https://apexcharts.com/docs/options/plotoptions/pie/价值

plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {...},
value:{
offsetY: -8, // -8 worked for me
color:'#ff00ff'
}
}
}
}
},

Answer 2

我想我会回答我的问题，我是如何最终做到这一点的。

应用font color -代替

total: formatter function(w) {
}

我使用了label:属性

要将文本定位到中心，我必须挖掘Apex图表代码并找到使用name的代码。

https://github.com/apexcharts/apexcharts.js/blob/main/src/charts/Pie.js

if (dataLabelsConfig.name.show) {
let elLabel = graphics.drawText({
x,
y: y + parseFloat(dataLabelsConfig.name.offsetY),
text: name,
textAnchor: 'middle',
foreColor: labelColor,
fontSize: labelFontSize,
fontWeight: labelFontWeight,
fontFamily: labelFontFamily
})

这是我的plotoptions的样子

plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
offsetY: 10,
},                        
total: {
show: true,
showAlways: true,
fontSize: '22px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
label: `${data[0]}/${data[1]}`,
color: '#0065bd',                            
formatter: function (w) {
return '';
}
}
}                   
}
}
},