树图布局算法定制

Question

我是使用图表的新手，据我了解，我需要三张图表（使用 React 的 highcharts 库）。我正在尝试使用树形图类型为我的图表构建一个算法，但没有成功。我会附上我需要做什么的图片，也许有人可以帮助我做到这一点？

找到以正确方式构建图表的解决方案

Answer 1

没错，您需要构建自定义算法来创建设计的图表。例如，您可以添加另一个子点并将其显示为父点。下面的例子：

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