React Highcharts树图-自定义框的顺序

bkhjykvo 于 2023-04-21 发布在 Highcharts

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

我想在我的React应用程序中使用Highcharts Treemap图，我希望一个特定的框/单元格总是显示在最后，在左侧。不管它的大小。我怎么做？
我读到有一个选项，也许可以通过扩展highchart组件来做到这一点，但它仍然不清楚a.如何做到这一点，一般情况下。b.自定义顺序，在扩展组件之后。

highcharts

来源：https://stackoverflow.com/questions/75997725/react-highcharts-treemap-customize-order-of-boxes

1条答案

按热度按时间

bqf10yzr1#

作为解决方案，您需要创建自己的自定义布局算法。最简单的方法是编辑由某些默认算法创建的结果。
例如，对于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

赞(0）回复(0）举报 2023-04-21