Making a pie chart bigger without affecting the doughnut chart

问题

I am making a pie chart and doughnut chart using canvasjs.

I have the pie chart inside a doughnut chart. I am not that good when it comes to CSS. Here the pie chart is at the center, but still it is very small. I don't know how to make it bigger as it is messing up the pie chart if I am attempt to make it bigger.

Is there any way the pie chart can be made bigger so there would not be much space between pie chart and the doughnut chart.

I am posting a picture of my result here.

I am using these properties:

for doughnut

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

for pie chart

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

EDIT : If I increase height and width of pie chart which results in -

Why white space is coming when I have set background color to transparent??

This is my pie chart properties-

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

I want something like this-

回答1:

You are probably getting smaller pie chart because of the height and the width of the container. Since, the height and the width of container is used by CanvasJS charts in order to determine the height of chart.

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

Try varying height and width in above given statement to see the changes and obtain proper size of pie chart as per your requirement.
You should also vary top and left in proportion to height and width of the container containing pie chart.

回答2:

Try using this layout:

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

And apply this CSS:

.parent {
  position: relative;
}

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

回答3:

I am able to figure out how to do this-

I am using these property

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

来源：https://stackoverflow.com/questions/41607486/making-a-pie-chart-bigger-without-affecting-the-doughnut-chart

标签

html

css

canvasjs