![enter image description here](https://i.stack.imgur.com/fHfIm.jpg)
Я использую высокие графики для построения кольцевой диаграммы. Рендеринг диаграммы идеален с учетом значений и цвета, но в пончике слишком много белых пробелов. Я также прикрепил скриншот диаграммы. Как видно на скриншоте, plotarea находится в центре, а окружающие имеют слишком много пустого пространства. , Я хочу удалить эти пробелы. Я реализовал конфигурацию, как показано ниже:
const config = {
credits: {
enabled: false,
},
title: {
text: "Credit<br/>Rating",
verticalAlign: "middle",
x: -30,
floating: true,
},
chart: {
styleMode: true,
type: "donut",
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: "35%",
renderTo: "container",
animation: true,
spacingTop: 0,
spacingRight: 0,
spacingBottom: 0,
spacingLeft: 0,
// margin: [0, 0, 0, 0],
reflow: true,
},
// title: { text: undefined },
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
x: 50,
itemMarginBottom: 10,
symbolRadius: 4,
// itemWidth: 120,
// y: 0,
},
// title: {
// text: 'Donut',
// align: 'center',
// verticalAlign: 'middle',
// y: 0,
// },
tooltip: {
enabled: false,
},
accessibility: {
point: {
valueSuffix: "%",
},
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
style: {
fontWeight: "bold",
color: "white",
},
},
showInLegend: true,
colors: ["#2CA6E3", "#26A904", "#E3682C", "#FFC30B"],
startAngle: -90,
endAngle: -90,
// center: [100, 100],
// size: '70%',
innerSize: "90%",
series: {
// marker: {
// enabled: true,
// },
},
},
},
series: [
{
type: "pie",
name: "Browser share",
// innerSize: '90%',
marker: { symbol: "square", radius: 12 },
data: data,
},
],
};
Любая идея о том, что идет не так в моей реализации.