React Highcharts Treemap - 自定义框的顺序

Question

我想在我的 React 应用程序中使用 Highcharts Treemap 图表，并且我希望特定的框/单元格始终显示在左侧的末尾。不管它的大小。 我该怎么做？

我读到有一个选项可以通过扩展 highchart 组件来实现，但它仍然不清楚 a。怎么做，大体上。 b.扩展组件后自定义顺序。

Answer 1

作为解决方案，您需要创建自己的自定义布局算法。最简单的方法是编辑由某些默认算法创建的结果。

例如，对于

stripes

，它将是：

Highcharts.seriesTypes.treemap.prototype.myCustomAlgorithm = function(parent, children) {
  const result = this.stripes(parent, children);

  let index = 4;
  const width = result[index].width;

  result[index].x = result[index].y = 0;

  while (index > 0) {
    index--;
    result[index].x += width;
  }

  return result;
};

示例：https://jsfiddle.net/BlackLabel/n6z8d4wc/

---

有用的线程： https://www.highcharts.com/forum/viewtopic.php?t=39629

文档： https://www.highcharts.com/docs/chart-and-series-types/treemap

API参考： https://api.highcharts.com/highcharts/series.treemap.layoutAlgorithm