如何使用高图调整树图中矩形的大小

Question

我在树状图中有 4 种颜色，每种颜色对应一个独特的类别。所有相同颜色的框位于相同的 space，但彩色矩形的形状是 "L"。我希望这个形状是矩形而不是 L。

下面是代码。

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap" class="treemap-chart"></div>

CSS

 .treemap-chart{
        float: left; width: 90%; text-align:center;
    }

脚本

Highcharts.chart('treemap', {
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            alternateStartingDirection: true,
            levels: [{
                level: 1,
                layoutAlgorithm: 'squarified',
                dataLabels: {
                    enabled: true,
                    align: 'left',
                    verticalAlign: 'top',
                    style: {
                        fontSize: '15px',
                        fontWeight: 'bold'
                    }
                }
            }],
            data: [{name: "summarize", id: "summarize", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "describe", id: "describe", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "explain", id: "explain", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "analyze", id: "analyze", sortIndex: 1, color: "#fa8775", value: 3},
                {name: "integrate", id: "integrate", sortIndex: 1, color: "#fa8775", value: 1},
                {name: "formulate", id: "formulate", sortIndex: -1, color: "#ffd700", value: 4},
                {name: "develop", id: "develop", sortIndex: -1, color: "#ffd700", value: 3},
                {name: "design", id: "design", sortIndex: -1, color: "#ffd700", value: 1},
                {name: "apply", id: "apply", sortIndex: -3, color: "#ea5f94", value: 5},
                {name: "draw", id: "draw", sortIndex: -3, color: "#ea5f94", value: 1},
                {name: "calculate", id: "calculate", sortIndex: -3, color: "#ea5f94", value: 2},
                {name: "solve", id: "solve", sortIndex: -3, color: "#ea5f94", value: 1},
                {name: "demonstrate", id: "demonstrate", sortIndex: -3, color: "#ea5f94", value: 1}]
        }],
        title: {
            text: 'Treemap'
        }
    });

这里是在 JS 中输出 fiddle。

https://jsfiddle.net/asma123/z3sg038z/

附上形状截图，我要。没有 L 形，只有矩形。这是我想要的形状：

Answer 1

您可以通过将 sortIndexes 作为类别添加到您的数据来实现此期望的行为。我们可以使用 parent 将其全球化，而不是像您现在所做的那样定义 sortIndex。

这将使 data 看起来像这样：

    data: [{
        id: 'A',
        sortIndex: 0,
        color:"#cd34b5"
    },
        {name: "summarize", id: "summarize", parent: 'A',  value: 1},
            {name: "describe", id: "describe", parent: 'A', value: 1},
            {name: "explain", id: "explain",  parent: 'A', value: 1},
    {
        id: 'B',
        sortIndex: 1,
        color:"#fa8775"
    },
            {name: "analyze", id: "analyze",parent: 'B', value: 3},
            {name: "integrate", id: "integrate", parent: 'B', value: 1},
    {
        id: 'C',
        sortIndex: 2,
        color:"#ffd700"
    },  
            {name: "formulate", id: "formulate", parent: 'C', value: 4},
            {name: "develop", id: "develop", parent: 'C', value: 3},
            {name: "design", id: "design", parent: 'C', value: 1},
    {
        id: 'D',
        sortIndex: 3,
        color:"#ea5f94"
    },  

            {name: "apply", id: "apply",  parent: 'D', value: 5},
            {name: "draw", id: "draw", parent: 'D', value: 1},
            {name: "calculate", id: "calculate",  parent: 'D', value: 2},
            {name: "solve", id: "solve", parent: 'D', value: 1},
            {name: "demonstrate", id: "demonstrate", parent: 'D', value: 1}]
    }],

Here 你可以找到有效的 JSFiddle

如何使用高图调整树图中矩形的大小

How to adjust size of rectangles in treemap using highcharts

treemap

highcharts