确保 amCharts 气泡图区域为正方形

Question

在创建气泡图时，例如https://www.amcharts.com/demos/bubble-chart/，是否可以在不指定图表div宽度和高度的情况下确保图表区域/网格为正方形？我希望它可以有点反应。无论窗口大小如何，图表的网格都是方形的。它需要考虑任何轴标签。

我正在使用 React/TypeScript。谢谢！

Answer 1

在努力使用 amchart 设置无济于事后，以下解决方案有效。但是，似乎应该与图表设置有关。

This article 解释了如何保持图像的特定纵横比。我只是将它用于气泡图。

<div style={{ position: 'relative', paddingTop: '93%' }}>
    <div id={chartId} style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }}></div>
</div>

1. 创建一个容器div，具有相对定位和顶部填充到正确的纵横比
2. 创建图表div作为具有绝对定位的孩子
3. 渲染页面
4. 截取屏幕截图，将其粘贴到您喜欢的图像编辑器中
5. 测量像素
6. 重新计算顶部填充

   对于我的图表，在左侧和底部都有轴文本，93% 是完美的。现在，无论页面宽度或设备如何，网格始终是方形的。 HTH。