如何摆脱这种不必要的裁剪？

Question

我有一个使用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代码时，会发生这种情况：

Answer 1

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

chart.paddingTop = 50;

我从官方amcharts演示创建了this code pen并添加了你的子弹配置。

Answer 2

尝试放：

z-index:5;

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