如何摆脱这种不需要的裁剪？答案

【问题标题】：How do I get rid of this unwanted cropping?如何摆脱这种不需要的裁剪？
【发布时间】：2019-02-16 17:47:18
【问题描述】：

我有一个使用 amCharts 库创建的图表。但是我在图像中遇到了不需要的裁剪，当它太高时，它会出现在每个条的顶部，正如我在这里强调的那样：

请帮助我不想剪裁。

这是 CSS 代码：


    #chartdiv {
      width: 100%;
      height: 500px;
      padding: 70px 0;
      border: 3px solid green;
    }

    body {  
      margin: 0 0 0 0;
      overflow:hidden;
      background-color: transparent;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

这是 JavaScript 代码的最后一部分：


    // Add bullets
    var bullet = series.bullets.push(new am4charts.Bullet());
    var image = bullet.createChild(am4core.Image);
    image.width = 150;
    image.height = 150;
    image.horizontalCenter = "middle";
    image.verticalCenter = "bottom";
    image.dy = 80;
    image.y = am4core.percent(100);
    image.propertyFields.href = "bullet";
    image.tooltipText = series.columns.template.tooltipText;
    image.propertyFields.fill = "color";
    image.filters.push(new am4core.DropShadowFilter());

编辑：

当我将 zoom: 0.5; 添加到 chartdiv CSS 代码时，会发生这种情况：

【问题讨论】：

能否请您也发布图表的 HTML？此外，似乎有比这两个规则更多的 CSS 可能会影响这一点。
似乎与 body {overflow: hidden} 有关，但我需要更多的 CSS 和标记。（另外，把你的风格标签放在你想要风格的东西上面。）
寻求调试帮助的问题（“为什么/如何使此代码无法运行？”）必须包括所需的行为、特定问题或错误以及 在问题本身中重现它所需的最短代码。请参阅：如何创建minimal reproducible example。
@LGSon ：必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。请告诉我你认为缺少哪一个？？？
你错过了“在问题本身中重现它所需的最短代码”，即所谓的minimal reproducible example。这里没有人会尝试将所有片段合并为一个，也不会从外部资源（这些文件可能包含病毒）下载文件。所有这一切都是你来这里寻求帮助时所期望的。如果还有什么不清楚的，请阅读How to Ask

标签： javascript css html amcharts

【解决方案1】：

您创建的项目符号不在图表的保留渲染区域中计算。图表中的项目符号非常大，因此它们在顶部被裁剪。如果您在图表上设置paddingTop，它应该可以解决您的问题。

chart.paddingTop = 50;

我从官方 amcharts 演示中创建了this code pen，并添加了您的项目符号配置。

【讨论】：

【解决方案2】：

试试看：

z-index:5;

进入 CSS 中的 'chartdiv' id。这是发生的，因为顶部的图像顶部有一些东西。 z-index 函数将确保 chartdiv 位于其他任何内容之上。如果不起作用，请尝试增加 z-index 值。

【讨论】：

也许尝试在 chartdiv 上设置position:absolute;。但是，这意味着必须按照之前的方式对齐图表
位置：绝对；也不能正常工作...看起来还有另一个与 chartdiv 不同的 div ...
这些东西都不会处理溢出：隐藏。将填充或溢出设置为其他可能。