Как настроить размер прямоугольников в древовидной карте с помощью старших диаграмм

Question

У меня есть 4 цвета в древовидной карте, и каждый цвет соответствует отдельной категории. Все коробки одного цвета лежат в одном и том же месте, но форма цветного прямоугольника - «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.

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

Прикрепленный скриншот формы, я хочу. Нет формы L, только прямоугольники. Это форма, которую я хочу:

Answer 1

Вы можете достичь этого желаемого поведения, добавив sortIndexes в качестве категорий к вашим данным. Вместо определения sortIndex, как вы делаете сейчас, мы можем глобализировать его с помощью parent.

Это сделает 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}]
    }],

Здесь вы можете найти работающий JSFiddle