我有一个使用 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 代码时,会发生这种情况:
最佳答案
您创建的元素符号不会在图表的保留呈现区域中计算。图表中的元素符号非常大,因此它们在顶部被裁剪。如果您在图表上设置 paddingTop
,它应该可以解决您的问题。
chart.paddingTop = 50;
我创建了 this code pen来自官方 amcharts 演示并添加了您的元素符号配置。
关于javascript - 我如何摆脱这种不需要的裁剪?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54725949/