时间戳

首页 > 解决方案 > 树图高图的不同父组的多个颜色轴

javascript - 树图高图的不同父组的多个颜色轴

问题描述

我正在研究具有两个不同级别的树形图。每个盒子的颜色阴影应该取决于一些与盒子大小的赋值无关的值。不同的父母组应该有不同的颜色分配。我创建了多个颜色轴，但无法将每个颜色轴分配给每个组的不同父级。如图片中的示例，第一个色轴（黄色）应属于“香蕉”组，第二个色轴（gr[`

Highcharts.chart('container', {
        color:['#36954E','#367B95','#7E9536','#C744D1','#44D1B7'],
        colorAxis:[ {
        minColor: '#E1C410',
        maxColor: '#FFFFFF', 
    },{
        minColor: '#2EE33C',
        maxColor: '#FFFFFF', 
    },{
        minColor: '#E17C10',
        maxColor: '#FFFFFF', 
    }
    ],
    series: [{
        type: "treemap",
                layoutAlgorithm: 'stripes',
                alternateStartingDirection: true,
        
        levels: [{
            level: 1,
            //layoutAlgorithm: 'sliceAndDice',
            dataLabels: {
                enabled: true,
                align: 'left',
                verticalAlign: 'top',
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold'
                }
            }
        },{ 
                    level: 2,
                    layoutAlgorithm: 'strip',
        }                  
        
        
        ],
        data: [{
            id: 'A',
            name: 'Apples',
        }, {
            id: 'B',
            name: 'Bananas',
        }, {
            id: 'O',
            name: 'Oranges',
        }, {
            name: 'Anne',
            parent: 'A',
            value: 5,
            colorValue: 5,
        }, {
            name: 'Rick',
            parent: 'A',
            value: 3,
            colorValue: 1
        }, {
            name: 'Peter',
            parent: 'A',
            value: 4,
            colorValue: 8
        }, {
            name: 'Anne',
            parent: 'B',
            value: 4,
            colorValue: 3
        }, {
            name: 'Rick',
            parent: 'B',
            value: 10,
            colorValue: 9
        }, {
            name: 'Peter',
            parent: 'B',
            value: 1,
            colorValue: 1
        }, {
            name: 'Anne',
            parent: 'O',
            value: 1,
            colorValue: 2
        }, {
            name: 'Rick',
            parent: 'O',
            value: 2,
            colorValue: 3
        }, {
            name: 'Peter',
            parent: 'O',
            value: 3,
            colorValue: 9
        }, {
            name: 'Susanne',
            parent: 'Kiwi',
            value: 2,
            colorValue: 6
        }]
    }],
    title: {
        text: 'Fruit consumption'
    }
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This chart shows a tree map with a hierarchy, where the
        groups are labelled with a different text style from the
        child nodes, and the nodes are grouped together by color.
    </p>
</figure>

`] 1 een) 对 'apple' 进行分组，依此类推...

标签： javascripthighchartstreemap

解决方案

颜色轴功能适用于整个系列，因此您需要将父组划分为单独的系列。要相邻显示系列，请为每个系列创建单独的 x 轴。

    xAxis: [{
        width: '33.333%'
    }, {
        width: '33.333%',
        left: '33.333%'
    }, {
        width: '33.333%',
        left: '66.666%'
    }],

    series: [{
        data: [...]
    }, {
        xAxis: 1,
        colorAxis: 1,
        data: [...]
    }, {
        xAxis: 2,
        colorAxis: 2,
        data: [...]
    }]

现场演示： https ://jsfiddle.net/BlackLabel/q3wyb298/

API参考：

https://api.highcharts.com/highcharts/xAxis.left

https://api.highcharts.com/highcharts/xAxis.width

推荐阅读