Highchart Treemap：强制布局3行 [英] Highchart Treemap: forcing layout on 3 lines

问题描述

我想强制将Highcharts 树形图的布局设置为3行（就像在一个普通的html表格）。
树形图中的所有项目都具有相同的值，但jsfiddle像row1一样显示框：ACEG row2：BDFH和框体I的高度比其他大得多。
我的代码：

  $（function（）{
 $（'＃container'）。highcharts （{
 series：[{
 type：treemap，
 layoutAlgorithm：'strip'，
 data：[{
 name：'A'，
值：6 
}，{
名称：'B'，
值：6 
}，{
名称：'C'，
值：6 
}，{
名称：'D'，
值：6 
}，{
名称：'E'，
值： 6 
}，{
名称：'F'，
值：6 
}，{
名称：'G'，
值：6 
}，{
名称：'H'，
值：6 
}，{
名称：'I'，
值：6 
 
 
}]，
 title：{
 text：'Highcharts Treemap'
} 
}）; 
  

}）; $ b

我的目标是到达3个相同的行：ABC，DEF，GHI

我尝试了Highcharts提供的4种类型的布局：sliceAndDice，stripes，squarified，strip

解决方案

这并不是真的如何使用 treemaps 。
我会尝试 heatmap 来代替。

示例：

• http://jsfiddle.net/jlbriggs/vk6sfdLs/

I'd like to force the layout of a Highcharts treemap to be on 3 lines (just as in a normal html table). All the items in the treemap have the same values but the jsfiddle displays boxes like row1:ACEG row2:BDFH and box I height is much bigger than the others. My code:

$(function () {
$('#container').highcharts({
    series: [{
        type: "treemap",
        layoutAlgorithm: 'strip',
        data: [{
            name: 'A',
            value: 6
        }, {
            name: 'B',
            value: 6
        }, {
            name: 'C',
            value: 6
        }, {
            name: 'D',
            value: 6
        }, {
            name: 'E',
            value: 6
        }, {
            name: 'F',
            value: 6
        }, {
            name: 'G',
            value: 6
        },{
            name: 'H',
            value: 6
        }, {
            name: 'I',
            value: 6
        }
       ]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});

});

My goal is to arrive to 3 equal rows: ABC, DEF, GHI

I tried 4 types of layout that Highcharts provides :sliceAndDice, stripes, squarified, strip

解决方案

That's not really how treemaps are intended to work. I would try a heatmap instead.

Example:

• http://jsfiddle.net/jlbriggs/vk6sfdLs/

这篇关于Highchart Treemap：强制布局3行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！