Question

我有一个由

组成的树形图

一个大容器
- 带元素
- 带元素
- 具有由其自身制成的元素
  - 元素
  - 元素
另一个大容器

＆＃13;

Highcharts.chart('container', {
  series: [{
    type: "treemap",
    animation: false,
    data: [
      // first big category
      {
        id: 'B',
        name: 'B'
      },
      {
        name: 'Anne',
        parent: 'B',
        value: 4
      }, {
        name: 'Peter',
        parent: 'B',
        value: 1
      },
      // below is a member of forst big category, but with sub-categories
      {
        name: 'aaa container',
        parent: 'B',
        id: 'aaa'
      }, {
        name: 'Anneinaaa',
        parent: 'aaa',
        value: 1
      }, {
        name: 'Rickinaaa',
        parent: 'aaa',
        value: 3
      },
      // second big category
      {
        name: 'Susanne',
        parent: 'Kiwi',
        value: 2,
        color: '#9EDE00'
      }
    ]
  }],
});

＆＃13;

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

＆＃13;

我想强调一下Rickinaaa和Anneinaaa的容器，并附有说明。

现在Rickinaaa和Anneinaaa与Anne和Peter处于同一级别，尽管事实上它是容器（我不知道如何展示的那个应该达到他们的水平。

ZingCharts的一个例子，显示了这个多层演示文稿：

更容易看到盒中盒子结构。

有没有办法在Highcharts中实现这一目标？具体来说，我怎么能有一个标有aaa container的可见容器，它将包含矩形{{1 }和Rickinaaa

Answer 1

可以使用树形图的自定义算法来完成。此处描述了该过程：https://www.highcharts.com/docs/chart-and-series-types/treemap（添加您自己的算法部分）。

我为演示目的创建了简化算法（某些值是硬编码的）：

// Custom positioning algorithm

function myFunction(parent, children) {
  childrenAreas = [];

  Highcharts.each(children, function(child) {
    // Do some calculations

    var newLeaf = null;
    if (child.id === 'A') {
      newLeaf = {
        x: 0,
        y: 0,
        width: 50,
        height: 50
      };
    } else if (child.id === 'B') {
      newLeaf = {
        x: 50,
        y: 0,
        width: 50,
        height: 50
      };
    } else if (child.name === 'Rick') {
      newLeaf = {
        x: parent.x + 10,
        y: parent.y + 10,
        width: parent.width - 20,
        height: (parent.height - 20) / 2
      }
    } else if (child.name === 'Peter') {
      newLeaf = {
        x: parent.x + 10,
        y: parent.y + 30,
        width: parent.width - 20,
        height: (parent.height - 20) / 2
      }
    } else if (child.name === 'Anne') {
      newLeaf = {
        x: parent.x + 10,
        y: 10,
        width: parent.width - 20,
        height: parent.height - 20
      }
    }

    if (newLeaf) {
      childrenAreas.push(newLeaf);
    }
  });
  return childrenAreas;
};

Highcharts.seriesTypes.treemap.prototype.myCustomAlgorithm = myFunction;

默认情况下，Highcharts仅为最高级别的节点分配颜色fill属性 - 所有其他节点都将其设置为none。它可以通过CSS手动更改：

.highcharts-internal-node {
  fill: #bada55
}

我还对核心代码做了一些小改动，以便在子代码下面绘制父级别：

(function(H) {
  var grep = H.grep,
    each = H.each,
    seriesTypes = H.seriesTypes;

  H.seriesTypes.treemap.prototype.drawPoints = function() {
    var series = this,
      points = grep(series.points, function(n) {
        return n.node.visible;
      });

    each(points, function(point) {
      var groupKey = 'level-group-' + point.node.levelDynamic;
      if (!series[groupKey]) {
        series[groupKey] = series.chart.renderer.g(groupKey)
          .attr({
            // CHANGED FROM: zIndex: 1000 - point.node.levelDynamic
            zIndex: 1000 + point.node.levelDynamic // @todo Set the zIndex based upon the number of levels, instead of using 1000
          })
          .add(series.group);
      }
      point.group = series[groupKey];

    });
    // Call standard drawPoints
    seriesTypes.column.prototype.drawPoints.call(this);



    // If drillToNode is allowed, set a point cursor on clickables & add drillId to point
    if (series.options.allowDrillToNode) {
      each(points, function(point) {
        if (point.graphic) {
          point.drillId = series.options.interactByLeaf ? series.drillToByLeaf(point) : series.drillToByGroup(point);
        }
      });
    }
  }
})(Highcharts);

现场演示： https://jsfiddle.net/BlackLabel/wfed4jeo/

如何在嵌套树形图中显示容器？

1 个答案: