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

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”

尝试在上面给出的语句中改变高度和宽度，以查看变化并根据您的要求获得适当大小的饼图。
您还应该根据包含饼图的容器的 height 和 width 来改变 top 和 left。 p>

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

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

我正在使用这些属性

#parent {
  position: relative;
}

#doughnutContainer, #pieContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
#doughnutContainer {
  width:800px;
  height:250px;
}
#pieContainer {
  transform: translate(-50%, 28%);
  width:200px; 
  height:160px;
}