我如何擺脫這種不必要的種植？

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演示創建此筆的 ，並添加了您的項目符號配置。

Answer 2

嘗試放入：

z-index:5;

放入CSS中的“ chartdiv” ID。 之所以發生這種情況，是因為圖像的頂部位於頂部。 z-index函數將確保chartdiv位於其他任何東西之上。 如果不起作用，請嘗試增加z-index值。