非固定 svg 高度？即使 svg 宽度和饼图大小相同，我的饼图也有不同的大小。 Svg 高度是固定的，我该如何解除它？

Question

我在带有 Highcharts 和 CSS 浮点数的网格中显示了许多饼图。

当前的 Highcharts 行为似乎如下：

所有 svg 容器的高度都设置为默认值 (400px)。
图例已填充。
饼图占据剩余区域

因此，图表的大小取决于图例中的项目数。我网格中的所有饼图都有不同的大小，而且看起来非常丑陋：

         █████                       ███                       █████        
      ███████████                  ███████                   █████████      
    ███████████████                ███████                 █████████████    
   █████████████████                 ███                   █████████████    
   █████████████████         * Foo bar baz quux              █████████      
    ███████████████          * Bar baz quux foo                █████        
      ███████████            * Baz quux foo bar         * Foo bar baz quux  
         █████               * Quux foo bar baz         * Bar baz quux foo  
  * Foo bar baz quux         * Foo bar baz quux         * Baz quux foo bar  
  * Bar baz quux foo         * Bar baz quux foo         * Quux foo bar baz  



         █████                      █████                       ███         
       █████████                 ███████████                  ███████       
     █████████████             ███████████████                ███████       
     █████████████            █████████████████                 ███         
       █████████              █████████████████         * Foo bar baz quux  
         █████                 ███████████████          * Bar baz quux foo  
  * Foo bar baz quux             ███████████            * Baz quux foo bar  
  * Bar baz quux foo                █████               * Quux foo bar baz  
  * Baz quux foo bar         * Foo bar baz quux         * Foo bar baz quux  
  * Quux foo bar baz         * Bar baz quux foo         * Bar baz quux foo

相反，我希望 svg 容器的高度取决于内容的高度。例如：

饼图已放置。它的大小由容器的宽度决定。
图例已填充。它需要多少就拿多少space。
svg 容器的高度设置为其内容的高度。

期望的行为：

         █████                     █████                     █████        
      ███████████               ███████████               ███████████     
    ███████████████           ███████████████           ███████████████   
   █████████████████         █████████████████         █████████████████  
   █████████████████         █████████████████         █████████████████  
    ███████████████           ███████████████           ███████████████   
      ███████████               ███████████               ███████████     
         █████                     █████                     █████        
  * Foo bar baz quux        * Foo bar baz quux        * Foo bar baz quux  
  * Bar baz quux foo        * Bar baz quux foo        * Bar baz quux foo  
                            * Baz quux foo bar        * Baz quux foo bar  
                            * Quux foo bar baz        * Quux foo bar baz  
                            * Foo bar baz quux                            
                            * Bar baz quux foo                            



         █████                     █████                     █████        
      ███████████               ███████████               ███████████     
    ███████████████           ███████████████           ███████████████   
   █████████████████         █████████████████         █████████████████  
   █████████████████         █████████████████         █████████████████  
    ███████████████           ███████████████           ███████████████   
      ███████████               ███████████               ███████████     
         █████                     █████                     █████        
  * Foo bar baz quux        * Foo bar baz quux        * Foo bar baz quux  
  * Bar baz quux foo        * Bar baz quux foo        * Bar baz quux foo  
  * Baz quux foo bar                                  * Baz quux foo bar  
  * Quux foo bar baz                                  * Quux foo bar baz  
                                                      * Foo bar baz quux  
                                                      * Bar baz quux foo

我可以通过 CSS 在网格中定位图表。我只需要根据内容的高度动态计算 svg 高度。

请注意，我不想从外部更新 svg 高度。我相信不可能可靠地猜测传奇的高度。我将不得不考虑网格中的元素数量、每个标签的长度、容器的宽度（DOM 定位后 CSS）、字体大小等。太多了麻烦了，Highcharts 应该可以帮我搞定。

这是一个基本演示，供您 fiddle 使用：http://jsfiddle.net/0y4nbyLa/1/

Answer 1

不，Highcharts 适合容器，而不是调整它的大小。渲染图表后，您可以简单地获取图例高度：Highcharts.charts[0].legend.contentGroup.getBBox().height - 但在回调中调用 setSize() 将删除动画。

你还可以设置图例的maxHeight。无论如何，如果您希望 Highcharts 调整容器大小，请在 userVoice 上创建一个想法 - Highcharts 团队正在尝试将最流行的想法实施到 core/plugins.

maxHeight 的演示，来自 @lolmaus：http://jsfiddle.net/0y4nbyLa/4/

非固定 svg 高度？即使 svg 宽度和饼图大小相同，我的饼图也有不同的大小。 Svg 高度是固定的，我该如何解除它？

Non-fixed svg height? My pie charts have different size even though svg width and pie size are identical. Svg height is fixed, how do i unfix it?

svg

highcharts