Highchart Treemap：强制布局3行

本文介绍了Highchart Treemap：强制布局3行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  这并不是真的如何使用 treemaps 。 
我会尝试 heatmap 来代替。
 
 
 示例： 
 
 
 
   
 
 
 
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行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！