ChartJS 饼图可以调整饼图和图例之间的差距

laximzn5 于 2023-10-18 发布在 Chart.js

关注(0)|答案(2)|浏览(197)

我在Ionic 4 / Angular应用程序中使用chart.js制作了一个饼图，其中包含以下选项。

let options : ChartOptions = {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            position: 'bottom',
            labels: {
              boxWidth: 20
            }
          },

我的图表看起来像下面，但我想差距如下所示要小，即图例更接近饼图。

有没有办法缩小这个差距？

编辑1

我刚刚注意到这是由于我的视口的大小。例如，在手机屏幕上：

现在，如果我让vie响应，并拉伸视图，我可以看到图例总是粘在视图的底部，所以当拉伸到图表很大时，图例现在更接近：

因此，图例我们“停靠”到视图的底部。

chart.js

来源：https://stackoverflow.com/questions/55631527/chart-js-pie-chart-can-the-gap-between-a-pie-chart-and-the-legend-be-adjusted

2条答案

按热度按时间

s5a0g9ez1#

我认为空间可能是由于你的CSS。试着改变它。这也解决了你的问题。

legend:{
position: 'bottom',
labels: {
          boxWidth: 20,
          padding: -10
        }
}

赞(0）回复(0）举报 2023-10-18

bprjcwpo2#

一个建议的解决方案（也许有一个更好的方法-仍然感兴趣.）
我发现，在我的情况下，我可以做到这一点只需调整我的容器底部。
使用以下标记..

<div id='graphc'>
      <canvas (click)='updateClick($event)' #mygraph></canvas>
    </div>

以下CSS

#graphc{
  width:100%;
  height: 100%;
  padding: 10px;
  padding-bottom: 120px; // <-- this moves it up
}

这至少做了我所追求的，虽然如果我伸展，我总是有差距。
也许我可以让css“动态”来解决这个问题

赞(0）回复(0）举报 2023-10-18

我来回答

ChartJS 饼图可以调整饼图和图例之间的差距

编辑1

2条答案

相关问题

热门标签

最新问答