Chart，js Pie Chart可以调整饼图和图例之间的差距

时间：2019-04-11 11:33:25

标签： javascript chart.js

我在Ionic 4 / Angular应用程序中有一个使用chart.js的饼图，具有以下选项... 

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

我的图表如下所示，但我希望如下所示的间隙较小，即图例离饼图更近。

enter image description here

有什么办法可以缩小这种差距吗？

预先感谢

[EDIT1]

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

enter image description here

现在，如果我使vie响应并拉伸视图，则可以看到图例始终停留在视图的底部，因此当拉伸到图表较大时，图例现在更接近...

enter image description here

因此，图例我们“停靠”在视图底部

2 个答案:

答案 0 :(得分：1)

我认为空间可能是由于您的CSS。尝试更改它。这样也可以解决您的问题。

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

答案 1 :(得分：0)

一个提议的解决方案（也许有更好的方法-仍然有兴趣...）

我发现我可以通过调整容器底部来做到这一点。

使用以下标记。

    <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
}

enter image description here

这至少可以做到我的追求，尽管如果我伸展，我的确总是有缝隙。...

也许我可以使CSS成为“动态”来解决此问题

enter image description here

相关问题
最新问题