javascript Anychart.Timeline:缩放将图表移动到具有左边距/右边距的容器上!= 0

zvms9eto  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(73)

如果向图表容器元素(或换行元素)添加了margin-left或margin-right <> 0,则使用鼠标滚轮进行缩放或缩放UI将图表向左移动。
我叉了一个Playground的例子,并补充说

#container {
  margin-left: 10%;
  margin-right: 10%;
}

原始代码。下面是示例的链接:https://playground.anychart.com/tJlE0hGZ/1
有没有机会阻止这种行为(除了删除边距)?

**编辑:**在阅读下面的提示时,我意识到我过度简化了我的示例。

我真正需要的是一个以<div/>为中心的图表容器
HTML

<div id="wrapper">
  <div id="container"></div>
</div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper{
  width: 100%;
  height: 500px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

我创建了一个新的Playground分叉:https://playground.anychart.com/PD9ICirX/2

djmepvbi

djmepvbi1#

这个问题可以通过两种方式来解决。

**JS (推荐)

删除与容器边距对应的CSS规则。
调用AnyChart margin方法。

//set chart's margin
chart.margin(0, '10%')

Example demo of the AnyChart margin method usage(第44行)

CSS

使用CSS规则将容器宽度设置为80%。

#container {
  width: 80%;
  height: 100%;
  
  margin: 0;
  padding: 0;
  
  margin-left: 10%;
  margin-right: 10%;
}

Example demo of the CSS rules

相关问题