在不影响圆环图的情况下制作更大的饼图

Question

我使用canvasjs制作饼图和圆环图。

我在圆环图中有饼图。在CSS方面我不是那么好。饼图位于中央，但仍然非常小。我不知道如何让它变得更大，因为如果我试图让它更大，它会弄乱饼图。

饼图是否可以做得更大，以便饼图和圆环图之间没有太大的空间。

我在这里发布了我的结果图片。

我正在使用这些属性：

甜甜圈

 width="100%" height="250px" top="0px" position="absolute" backgroundColor="transparent" uniqueID ="doughnut"

饼图

width="78px" height="100px" top="75px" position="absolute" left="560px"  backgroundColor="transparent" uniqueID=”pie”

编辑：如果我增加饼图的高度和宽度，结果是 -

为什么在将背景颜色设置为透明时会出现空白区域？

这是我的饼图属性 -

                   type: "pie",
                   backgroundColor: "transparent",
                   indexLabelFontColor: "white",
                   indexLabelFontSize: "14px",
                   markerType: "circle",
                   radius : "100%",
                   innerRadius :"200px",

我想要这样的事情 -

Answer 1

由于容器的高度和宽度，您可能会得到更小的饼图。因为，CanvasJS图表使用容器的高度和宽度来确定图表的高度。

width="78px" height="100px" top="75px" position="absolute" left="560px"  backgroundColor="transparent" uniqueID=”pie”

尝试在上面给定的语句中改变高度和宽度，以查看更改并根据您的要求获得正确的饼图大小 您还应该与包含饼图的容器的高度和宽度成比例地改变顶部和左侧。

Answer 2

尝试使用此布局：

<div class="parent">
  <div class="doughnut"></div>
  <div class="pie"></div>
</div>

并应用此CSS：

.parent {
  position: relative;
}

.doughnut, .pie {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 3

我能够弄清楚如何做到这一点 -

我正在使用这些属性

 function checkContainer () {
    if($('#divID').is(':visible'))){
        createGrid();
    }else {
        setTimeout(checkContainer, 50);
    }
  }