highcharts 树形图布局算法的定制

pftdvrlh  于 11个月前  发布在  Highcharts
关注(0)|答案(1)|浏览(168)

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

ukdjmx9f

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

相关问题