highcharts 树形图布局算法的定制

pftdvrlh 于 5个月前发布在 Highcharts

关注(0)|答案(1)|浏览(51)

我刚开始使用图表，因为我知道我需要三图图表（使用React的highcharts库）。我正在尝试为我的图表构建一个算法，具有树图类型，但没有成功。我将附上我需要做的事情的图像，也许有人可以帮助我做到这一点？image
找到解决方案，以适当的方式建立图表

highcharts

来源：https://stackoverflow.com/questions/77563272/customization-of-layout-algorithm-for-treemap

1条答案

按热度按时间

ukdjmx9f1#

这是正确的，你需要建立你的自定义算法来创建设计的图表。例如，你可以添加另一个子点，并将其作为父点。下面的例子：

function customAlgorithm(parent, children) {
  const childrenAreas = [];
  const isSecondLevel = children[0].level === 2;
  let x = 0;

  children.forEach((child, index) => {
    const height = isSecondLevel ? parent.height / 2 : parent.height;
    const y = isSecondLevel ? parent.height / 2 : 0;

    if (isSecondLevel && index === 0) {
      childrenAreas.push({
        x: 0,
        y: 0,
        width: parent.width,
        height: parent.height / 2
      });
    } else {
      const width = isSecondLevel ?
        parent.width * (child.val / (parent.val - children[0].val)) :
        parent.width * (child.val / parent.val);

      childrenAreas.push({
        x,
        y,
        width,
        height
      });

      x += width;
    }
  });

  return childrenAreas;
}

Highcharts.seriesTypes.treemap.prototype.customAlgorithm = customAlgorithm;

字符串

现场演示：https://jsfiddle.net/BlackLabel/z5v4wfme/
密码：https://www.highcharts.com/docs/chart-and-series-types/treemap

赞(0）回复(0）举报 5个月前