ApexCharts甜甜圈使图例显示所有项目
ApexCharts甜甜圈使图例显示所有项目
提问于 2020-06-06 01:52:43
有没有办法让所有的图例选项都显示在一个圆环图上。目前它是使用滚动条，我不想要这个，我希望所有的图例选项是可见的在一个垂直的形式。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,
}
}],}
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-06 21:08:05
一般来说，使用您提到的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。
Stack Overflow用户
发布于 2020-06-06 02:11:39
这些都是默认的fontSize和height，为什么不尝试减少第一个，增加第二个呢？
legend: {
fontSize: '14px',
height: undefined,
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62221436
复制相关文章
相似问题
腾讯云开发者
