Angular 如何在treemap squarified图表上自定义绘制每个图块

我需要像这样画这个图表：

我还需要显示嵌套数据。单击单元格时，将显示其他数据

我一直在读文件，在谷歌搜索，但我找不到任何解决方案。这就是我现在绘制图表的方式

我使用“订单”字段填充每个瓷砖值。我很快就要得到最终的结果了，但是第二块和第三块瓷砖以不同的方式适合我

---

您是否尝试过使用切片和骰子布局算法？Highcharts演示示例将示例视为您的需求

演示：

API:

---

编辑

经过讨论-此案例的最佳解决方案是使用与treemap系列混合的深入模块

演示：

---

API:

我需要这个图表作为树形图，因为我有一些嵌套的数据，需要在每个图块被创建时显示clicked@GUDARI但这是一个树形图。我试着改为sliceAndDice，但问题是嵌套的图块。你可以在这个imgur@GUDARI上看到对不起，但我不知道这个imgur发生了什么。如图所示，您已经询问了treemap，我建议了解决方案。这是一个带有您姓名的输出：没有关于任何嵌套平铺的信息。如果您在实现它们方面需要帮助，请准备演示并提出另一个具体问题。@GUDARI您能再次更新JSFIDLE示例吗？看起来还是旧的。

const highChartOptions = {
    colorAxis: {
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },

        drillUpButton: {
            position: {
                align: 'right',
                x: -10,
                y: 10
            }
        },
        series: [{
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            animationLimit: 1000,
            dataLabels: {
                enabled: false
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true
                },
                borderWidth: 3
            }],
            turboThreshold: 100000,
            data: [],
        }],
        tooltip: {
            formatter: function () {
                return this.point.realValue || this.point.value;
            }
        },
        title: {
            text: ''
        }
};

data.forEach((motivator, index) => {
            motivadorPoint = {
                id: motivator._id,
                name: motivator._id,
                color: Highcharts.getOptions().colors[index],
                realValue: motivator.count,
                value: motivator.order
            };

      motivator.employees.forEach(employee => {
                employeePoint = {
                    id: employee,
                    name: `${employee.name} ${employee.lastName1} ${employee.lastName2}`,
                    parent: motivator._id,
                    value: 10
                };
                highChartOptions.series[0].data.push(employeePoint);
            });

            highChartOptions.series[0].data.push(motivadorPoint);
        });

Highcharts.chart('container', highChartOptions);

Highcharts.chart('container', {
    series: [{
        type: "treemap",
        data: [{
            name: 'A',
            value: 6
        }, {
            name: 'B',
            value: 6
        }, {
            name: 'C',
            value: 4
        }, {
            name: 'D',
            value: 3
        }, {
            name: 'E',
            value: 2
        }, {
            name: 'F',
            value: 2
        }, {
            name: 'G',
            value: 1
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});