如何让一个 div 在另一个 div 中答案

【问题标题】：How to have one div inside another div如何让一个 div 在另一个 div 中
【发布时间】：2017-01-04 07:04:22
【问题描述】：

您好，我正在使用 canvasjs 制作图表。制作特定图表非常简单，但问题是我想要两个不同的图表，以便饼图位于圆环图内。

我无法在里面制作另一个。我用过

display : inline-block

对于two div id 但没有效果。有人可以建议我如何做到这一点。

这是我的代码-

<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
<link type='text/css' rel="stylesheet" href='style.css' />
<script type="text/javascript">

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        title:{
            text: "My First Chart in CanvasJS"              
        },
        data: [              
        {
            // Change type to "doughnut", "line", "splineArea", etc.
            type: "doughnut",
            dataPoints: [
                { label: "apple",  y: 10  },
                { label: "orange", y: 15  },
                { label: "banana", y: 25  },
                { label: "mango",  y: 30  },
                { label: "grape",  y: 28  }
            ]
        }
        ]
    });
    chart.render();
    var chart = new CanvasJS.Chart("chartContainerpie", {
        data: [              
        {
            // Change type to "doughnut", "line", "splineArea", etc.
            type: "pie",
            dataPoints: [
                { label: "apple",  y: 10  },
                { label: "orange", y: 15  },
                { label: "banana", y: 25  },
                { label: "mango",  y: 30  },
                { label: "grape",  y: 28  }
            ]
        }
        ]
    });
    chart.render();
}
</script>
</head>
<body>
<div>
<div id="chartContainerpie" style="height: 300px; width: 100%;></div>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</div>
</body>
</html>

CSS 只包含显示块的行。

【问题讨论】：

<div id="chartContainerpie" style="height: 300px; width: 100%;></div> 缺少关闭样式属性的" - 不要认为这是答案，但它无济于事
你有现场演示吗？检查它现在的样子。

标签： html css canvasjs

【解决方案1】：

这可能不是完美的答案，但它会为您指明正确的方向：

想法是将画布的背景颜色更改为透明并使用position css将两个画布重叠

CSS

#chartContainerpie{
  position: absolute;
  top: 130px;
  left: 0px;
}
#chartContainer{
  position: absolute;
  top: 0px;
  left: 0px;
}

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "My First Chart in CanvasJS"
  },
  backgroundColor: "transparent",
  data: [{
    // Change type to "doughnut", "line", "splineArea", etc.
    type: "doughnut",
    dataPoints: [{
      label: "apple",
      y: 10
    }, {
      label: "orange",
      y: 15
    }, {
      label: "banana",
      y: 25
    }, {
      label: "mango",
      y: 30
    }, {
      label: "grape",
      y: 28
    }]
  }]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainerpie", {
    backgroundColor: "transparent",
  data: [{
    // Change type to "doughnut", "line", "splineArea", etc.
    indexLabelPlacement: "inside",
    indexLabelFontColor: "white",
    indexLabelFontSize: "14px",
    type: "pie",
    dataPoints: [{
      label: "apple",
      y: 10
    }, {
      label: "orange",
      y: 15
    }, {
      label: "banana",
      y: 25
    }, {
      label: "mango",
      y: 30
    }, {
      label: "grape",
      y: 28
    }]
  }]
});
chart.render();

这里是fiddle

【讨论】：

我在这个问题中遇到了类似的问题，请您帮忙stackoverflow.com/questions/41607486/…