Javascript 顶点图表圆环图-绘图中系列项目之间的填充
我正在尝试在apex图表中创建一个类似于下图(右)的甜甜圈图表,我已经非常接近了,但是我需要沿着甜甜圈图表的绘图在系列项目周围进行一些笔划或填充,如图所示 当前配置Javascript 顶点图表圆环图-绘图中系列项目之间的填充,javascript,charts,apexcharts,Javascript,Charts,Apexcharts,我正在尝试在apex图表中创建一个类似于下图(右)的甜甜圈图表,我已经非常接近了,但是我需要沿着甜甜圈图表的绘图在系列项目周围进行一些笔划或填充,如图所示 当前配置 const options = { chart: { type: 'donut', height: 150, width: '100%', offsetX: 50 }, plotOptions: { pie: { startAngl
const options = {
chart: {
type: 'donut',
height: 150,
width: '100%',
offsetX: 50
},
plotOptions: {
pie: {
startAngle: 10,
donut: {
size: '90%',
dataLabels: {
enabled: false
},
labels: {
show: true,
name: {
show: true,
offsetY: 38,
formatter: () => 'Completed'
},
value: {
show: true,
fontSize: '48px',
fontFamily: 'Open Sans',
fontWeight: 500,
color: '#ffffff',
offsetY: -10
},
total: {
show: true,
showAlways: true,
color: '#BCC1C8',
fontFamily: 'Open Sans',
fontWeight: 600,
formatter: (w) => {
const total = w.globals.seriesTotals.reduce(
(a, b) => a + b,
0
);
return `${total}%`;
}
}
}
}
},
},
dataLabels: {
enabled: false
},
labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
legend: {
show: false,
position: 'right',
offsetX: -30,
offsetY: 70,
formatter: (value, opts) => {
return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
},
markers: {
onClick: undefined,
offsetX: 0,
offsetY: 25
}
},
fill: {
type: 'solid',
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
},
stroke: {
width: 0
},
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
};
尝试将笔划宽度设置为大于0,并为笔划提供与背景相同的颜色
笔划:{
宽度:4,
颜色:['#1E252A']
}