有没有办法让所有图例选项显示在 donut 顶点图上。目前它使用滚动条,我不希望这样,我希望所有图例选项都以垂直形式可见。 Image of the donut chart with a scrollbar legend
理想情况下,我希望它看起来像这样,但不确定需要更改哪些设置。 Ideal donut chart
这些是我当前使用的选项:
const options = {
chart: {
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom',
}
}
}, {
breakpoint: 1200,
options: {
chart: {
height: '150px',
width: '100%',
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
height: '200px',
width: '100%',
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
}
}, {
breakpoint: 992,
options: {
chart: {
height: '250px',
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
}
}],
}
最佳答案
一般来说,使用 chart height option 是更好的方法。 ,您提到的,以调整图表区域中的可见内容。
如果出于某种原因这不适合您的使用,那么您需要开始覆盖默认的 CSS。
以下应该可以解决问题:
.apexcharts-canvas svg {
/* Allow the legend to overflow the chart area */
overflow: visible;
}
.apexcharts-canvas svg foreignObject {
/* Allow the legend to overflow the legend container */
overflow: visible;
}
这是一个codepen它与圆环图一起使用。
关于reactjs - ApexCharts Donut 使图例显示所有项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62221436/