highcharts - 我需要使用 HighCharts 开发冰柱图

Question

嗨，我可以调整树图并做到吗？我可以传递所有数据层次结构。它已经在 d3 中实现。我可以使用/调整 highcharts 的任何属性来渲染冰柱吗？

Answer 1

您可以使用heatmap- 看到这个 SO 问题：Creating ICICLE Chart using Highcharts Library

其他方法是使用treemap. 不幸的是，没有可以启用冰柱图的默认布局算法，因此必须创建它。

如何创建自定义布局算法：http ://www.highcharts.com/docs/chart-and-series-types/treemap

对于 icicle 来说，如果传递给布局算法的子节点是未排序的，那会更好。特征可以通过包装setTreeValues功能改变。

示例：http: //jsfiddle.net/c6bo2asn/

$(function () {
    //start wapper
    (function (H) {
        H.wrap(H.seriesTypes.treemap.prototype, 'setTreeValues', function (proceed) {
            var tree = arguments[1];
            //setTreeValues: function (tree) {
            var series = this,
                childrenTotal = 0,
                sorted = [],
                val,
                point = series.points[tree.i];

            // First give the children some values
            H.each(tree.children, function (child) {
                child = series.setTreeValues(child);
                series.insertElementSorted(sorted, child, function (el, el2) {
                    return 0;//do not sort 
                });

                if (!child.ignore) {
                    childrenTotal += child.val;
                } else {
                    // @todo Add predicate to avoid looping already ignored children
                    series.eachChildren(child, function (node) {
                        H.extend(node, {
                            ignore: true,
                            isLeaf: false,
                            visible: false
                        });
                    });
                }
            });

            // Set the values
            val = H.pick(point && point.value, childrenTotal);
            H.extend(tree, {
                children: sorted,
                childrenTotal: childrenTotal,
                // Ignore this node if point is not visible
                ignore: !(H.pick(point && point.visible, true) && (val > 0)),
                isLeaf: tree.visible && !childrenTotal,
                name: H.pick(point && point.name, ""),
                val: val
            });
            return tree;
        //},
        });
    }(Highcharts));    
    //end wapper
    //start layoutAlgorithm logic
    function myFunction(parent, children) {
        var childrenAreas = [],
            widthSoFar = 0,
            w;
        Highcharts.each(children, function (child,i) {
            if (child.level == 1) { //even lines
                childrenAreas.push({
                    x: parent.x,
                    y: parent.y + parent.height*(i/children.length),
                    width: parent.width,
                    height: parent.height/children.length
                });
            } else {
                w = parent.width * child.val/parent.val;
                childrenAreas.push({
                    x: parent.x + widthSoFar,
                    y: parent.y,
                    width: child.name === '_empty' ? 0 : w,
                    height: parent.height
                });
                widthSoFar += w;
            }
        });
        return childrenAreas;
    }
    //end layoutAlgorithm logic
    //assign new layoutAlgorithm logic
    Highcharts.seriesTypes.treemap.prototype.icicle = myFunction;
    //create chart
    $('#container').highcharts({
        series: [{
            type: "treemap",
            layoutAlgorithm: 'icicle',
            dataLabels: {
                formatter: function(){
                    //hide _empty
                    return this.key === '_empty' ? '' : this.key;
                },
                rotation: -90
            },
            borderWidth: 0,
            levels: [{
                level: 2,
                borderWidth: 1
            }],
            /*
            level 1 data points are lines
            */
            data: [{
                id: 'top',
                color: "#EC2500"
            }, {
                name: 'a Anne',
                parent: 'top',
                value: 50
            }, {
                name: 'a Rick',
                parent: 'top',
                value: 30
            }, {
                name: 'a Peter',
                parent: 'top',
                value: 20
            }, {
                id: 'second'
            }, {
                name: 'b Anne',
                parent: 'second',
                value: 30,
                color: "#ECE100"
            }, {
                name: '_empty',
                parent: 'second',
                value: 20
            }, {
                name: 'b Peter',
                parent: 'second',
                value: 30,
                color: "#EC9800"
            }, {
                name: '_empty',
                parent: 'second',
                value: 20
            }, {
                id: 'third',
                color: '#EC9800'
            }, {
                name: 'o Anne',
                parent: 'third',
                value: 20
            }, {
                name: 'o Rick',
                parent: 'third',
                value: 10
            }, {
                name: '_empty',
                parent: 'third',
                value: 70
            }, {
                id: 'last',
                color: '#669866'
            }, {
                name: '_empty',
                parent: 'last',
                value: 20
            }, {
                name: 'z Anne',
                parent: 'last',
                value: 10
            }, {
                name: '_empty',
                parent: 'last',
                value: 70
            }]
        }],
        title: {
            text: 'Fruit consumption'
        }
    });
});