我需要将chartjs中两个图表的默认位置从绝对位置转换为相对位置。在浏览器的检查元素中,我看到它可以被改变。然后我尝试改变 div
变成相对的,如下所示,但它并没有改变图表的位置。
<div class="col-xs-6 col-sm-6 d-flex flex-column" style="background-color: ghostwhite;">
<div id="barChartContainer1" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
<div id="barChartContainer2" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
<div id="barChartContainer3" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
</div>
三个图表相互重叠。我试着改变java脚本如下,但它没有做我预期的工作。
var chart1 = new CanvasJS.Chart("barChartContainer2", {
animationEnabled: true,
position: "relative",
height: 600,
})
谁能帮我解决这个问题?
你可以尝试实现 Flexbox 在CSS3中设计。
#container{
display: flex;
flex-direction: row;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div style="height: 100%; width: 100%; padding: 10px; background-color: red;"></div>
<div style="height: 100%; width: 100%; padding: 10px; background-color: blue;"></div>
<div style="height: 100%; width: 100%; padding: 10px; background-color: green;"></div>
</div>
</body>
</html>
如果这样不行的话,这个肯定行得通。
var chart = new CanvasJS.Chart("chart1",
{
animationEnabled: true,
title: {
text: "Chart 1"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(255,12,32,.3)",
dataPoints: [
{ x: 1, y: 10 },
{ x: 2, y: 30 },
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chart2",
{
animationEnabled: true,
title: {
text: "Chart 2"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(32,255,12,.3)",
dataPoints: [
{ x: 1, y: 10 },
{ x: 2, y: 20 },
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chart3",
{
animationEnabled: true,
title: {
text: "Chart 3"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(12,32,255,.3)",
dataPoints: [
{ x: 1, y: 30 },
{ x: 2, y: 1 },
]
},
]
});
chart.render();
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart1" style="height: 100%; width: 30%; display: inline-block;"> </div>
<div id="chart2" style="height: 100%; width: 30%; display: inline-block;"></div>
<div id="chart3" style="height: 100%; width: 30%; display: inline-block;">
</div>