当最小值和最大值的范围较大时,堆叠柱形图条形重叠

问题描述 投票:0回答:1

使用带有堆叠的柱形图,

如果系列中的最小值和最大值之间存在很大差异,则低值会重叠,是否有解决方法?

请参阅此小提琴中的 Jan 类别以进行复制 - 两个条形都有一个值,但图表中只有一个可见,将鼠标悬停在图例上显示它们重叠。仅当系列中的最大值比最小值大数倍时才会发生这种情况,设置条形的最小尺寸也没有帮助,它们仍然重叠。

    Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
            'Oct', 'Nov', 'Dec'
        ]
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        },
        column: {
            minPointLength: 3
        }
    },

    series: [{
        data: [
            27, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
            95.6, 5400.4
        ]
    }, {
        data: [
            25, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5,
            106.4, 129.2
        ]
    }],

    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b> ' +
            '({point.percentage:.1f}%)<br/>'
    }
});

小提琴:https://jsfiddle.net/onbx4pre/1/

javascript highcharts
1个回答
0
投票

您可以简单地添加不同的最小尺寸

minPointLength
,这样它们就不会具有相同的尺寸。

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        data: [
            27,
            71.5,
            106.4,
            129.2,
            144.0,
            176.0,
            135.6,
            148.5,
            216.4,
            194.1,
            95.6,
            5400.4
        ],
        minPointLength: 30 // <<<
    }, {
        data: [
            25,
            176.0,
            135.6,
            148.5,
            216.4,
            194.1,
            95.6,
            54.4,
            29.9,
            71.5,
            106.4,
            129.2
        ],
        minPointLength: 20 // <<<
    }],
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b> ' + '({point.percentage:.1f}%)<br/>'
    }
});
#container {
    height: 100vh;
    max-height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.1.2/highcharts.min.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

© www.soinside.com 2019 - 2024. All rights reserved.