如何使用highcharts调整树图中矩形的大小

Question

我在树形图中有4种颜色，每种颜色都对应一个唯一的类别。所有相同颜色的盒子都在同一个空间内，但彩色矩形的形状是＆＃34; L＆＃34;。我希望这个形状是矩形而不是L。

以下是代码。

HTML

var_dump(preg_replace('/,+/', ',', "hello,,sad,,,,,")); // gave output: hello,sad,

CSS

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap" class="treemap-chart"></div>

脚本

 .treemap-chart{
        float: left; width: 90%; text-align:center;
    }

这是JS小提琴的输出。

https://jsfiddle.net/asma123/z3sg038z/

附件是形状的截图，我想要。没有L形，只有矩形。 这是我想要的形状：

Answer 1

您可以通过将sortIndex作为类别添加到数据中来实现此期望的行为。我们可以使用parent对其进行全球化，而不是像现在一样定义data。

这会使 data: [{ id: 'A', sortIndex: 0, color:"#cd34b5" }, {name: "summarize", id: "summarize", parent: 'A', value: 1}, {name: "describe", id: "describe", parent: 'A', value: 1}, {name: "explain", id: "explain", parent: 'A', value: 1}, { id: 'B', sortIndex: 1, color:"#fa8775" }, {name: "analyze", id: "analyze",parent: 'B', value: 3}, {name: "integrate", id: "integrate", parent: 'B', value: 1}, { id: 'C', sortIndex: 2, color:"#ffd700" }, {name: "formulate", id: "formulate", parent: 'C', value: 4}, {name: "develop", id: "develop", parent: 'C', value: 3}, {name: "design", id: "design", parent: 'C', value: 1}, { id: 'D', sortIndex: 3, color:"#ea5f94" }, {name: "apply", id: "apply", parent: 'D', value: 5}, {name: "draw", id: "draw", parent: 'D', value: 1}, {name: "calculate", id: "calculate", parent: 'D', value: 2}, {name: "solve", id: "solve", parent: 'D', value: 1}, {name: "demonstrate", id: "demonstrate", parent: 'D', value: 1}] }], 看起来像这样：

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

Here你可以找到工作的JSFiddle