时间戳

首页 > 解决方案 > 如何使用 highcharts 调整树形图中矩形的大小

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

问题描述

我在树形图中有 4 种颜色，每种颜色对应一个独特的类别。所有相同颜色的盒子位于相同的空间，但彩色矩形的形状是“L”。我希望这个形状是矩形而不是 L。

下面是代码。

HTML

<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>

CSS

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

脚本

Highcharts.chart('treemap', {
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            alternateStartingDirection: true,
            levels: [{
                level: 1,
                layoutAlgorithm: 'squarified',
                dataLabels: {
                    enabled: true,
                    align: 'left',
                    verticalAlign: 'top',
                    style: {
                        fontSize: '15px',
                        fontWeight: 'bold'
                    }
                }
            }],
            data: [{name: "summarize", id: "summarize", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "describe", id: "describe", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "explain", id: "explain", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "analyze", id: "analyze", sortIndex: 1, color: "#fa8775", value: 3},
                {name: "integrate", id: "integrate", sortIndex: 1, color: "#fa8775", value: 1},
                {name: "formulate", id: "formulate", sortIndex: -1, color: "#ffd700", value: 4},
                {name: "develop", id: "develop", sortIndex: -1, color: "#ffd700", value: 3},
                {name: "design", id: "design", sortIndex: -1, color: "#ffd700", value: 1},
                {name: "apply", id: "apply", sortIndex: -3, color: "#ea5f94", value: 5},
                {name: "draw", id: "draw", sortIndex: -3, color: "#ea5f94", value: 1},
                {name: "calculate", id: "calculate", sortIndex: -3, color: "#ea5f94", value: 2},
                {name: "solve", id: "solve", sortIndex: -3, color: "#ea5f94", value: 1},
                {name: "demonstrate", id: "demonstrate", sortIndex: -3, color: "#ea5f94", value: 1}]
        }],
        title: {
            text: 'Treemap'
        }
    });

这是 JS fiddle 中的输出。

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

附上我想要的形状截图。没有 L 形，只有矩形。这是我想要的形状： 在此处输入图像描述

标签： highchartstreemap

解决方案

sortIndexes您可以通过将类别添加到数据中来实现这种期望的行为。我们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}]
    }],

在这里你可以找到工作的 JSFiddle

推荐阅读