css 如何在CanvasJS中将图表中的位置从绝对位置更改为相对位置

bqf10yzr 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(181)

我需要将CanvasJS中两个图表的默认位置从绝对位置转换为相对位置。从浏览器的检查元素中，我看到它可以更改。然后我尝试将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,
})

有人能帮我吗？

css

来源：https://stackoverflow.com/questions/62037655/how-to-change-position-from-absolute-to-relative-in-charts-in-canvasjs

2条答案

按热度按时间

bqucvtff1#

您可以尝试在CSS3中实现Flexbox设计：

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

如果这不起作用，这将是肯定的：
一个二个一个一个

赞(0）回复(0）举报 2023-04-01

q0qdq0h22#

下面这个CSS规则对我很有效：
.canvasjs-chart-container>canvas:first-of-type { position: relative !important; }

赞(0）回复(0）举报 2023-04-01