时间戳

首页 > 解决方案 > 如何在树形图平方图表上自定义绘制每个图块

angular - 如何在树形图平方图表上自定义绘制每个图块

问题描述

我需要像这样画这张图表： 在此处输入图像描述

我还需要显示嵌套数据。当您单击一个单元格时，会显示其他数据。

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

我正在使用“订单”字段来填充每个图块值。我接近获得最终结果，但第二个和第三个瓷砖以我需要的不同方式适合。

https://jsfiddle.net/elefantelimpio/vmt4nLp5/11/

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);

标签： angularhighcharts

解决方案

您是否尝试过使用SliceAndDice布局算法？Highcharts 演示示例看起来像您的要求。

演示：https ://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/treemap-layoutalgorithm-sliceanddice/

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'
    }
});

API：https ://api.highcharts.com/highcharts/series.treemap.layoutAlgorithm

编辑

经过讨论 - 这种情况下的最佳解决方案是使用与树图系列混合的钻取模块。

演示：https ://jsfiddle.net/BlackLabel/fo64ubLg/

API：https ://api.highcharts.com/highcharts/drilldown

推荐阅读