highcharts嵌套双环图双饼图

最新推荐文章于 2025-06-07 14:26:39 发布

楚念悠

最新推荐文章于 2025-06-07 14:26:39 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

文章标签： highcharts 双饼图双环图

本文链接：https://blog.youkuaiyun.com/jpjp2020/article/details/86640063

本文介绍了如何使用Highcharts库创建一个无父级关系的嵌套双环图。通常，Highcharts的旭日图或双饼图展示有层次的数据关系，但这里将展示如何在没有层次的情况下实现这种图表，以直观地对比相关数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方演示里都是有父级关系的的旭日图/双饼，想要个单纯比较关系，但是没有父级的嵌套双环图

先上图

HTML:
1.想要两层的圆环图都显示dataLabel，需要宽度为500px，500px宽于全部型号手机，缩放0.75倍
2.在手机页面显示左右溢出，增加弹性父级嵌套，父级居中显示，并且overflow: hidden，水平居中get

<div class="container1-box">
    <div id="container1"
         style="min-width: 500px; height: 300px; transform: scale(0.75);"></div>
</div>

css:

.container1-box {
    display: flex;
    width: 100%;
    overflow: hidden;
    justify-content: center;
}

js:

//双圆环图

var chart2 = new Highcharts.chart('container1', {
    chart: {
        type: 'pie',
        spacingBottom: 0,
        spacingTop: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    title: {
        text: null
    },
    credits: {
        enabled: false  // 禁用版权信息
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        }
    },
    series: [{
        name: '伴侣得分',
        data: [{
            name: 'a',
            y: 20,
            color: '#32A6A3'
        }, {
            name: 'b',
            y: 40,
            color: '#ED93B5'
        }, {
            name: 'c',
            y: 40,
            color: '#FC983B'
        }],
        size: '70%',
        innerSize: '50%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name + ':</b> ' +
                    this.y : null;
            },
            color: '#ffffff',
            distance: -35
        }
    }, {
        name: '本人得分',
        data: [{
            name: 'a',
            y: 50,
            color: '#32A6A3'
        }, {
            name: 'b',
            y: 20,
            color: '#ED93B5'
        }, {
            name: 'c',
            y: 30,
            color: '#FC983B'
        }],
        size: '100%',
        innerSize: '70%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' +
                    this.y : null;
            },
            color: '#ffffff',
            distance: -25
        },
        id: 'versions'
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 400
            },
            chartOptions: {
                series: [{
                    id: 'versions',
                    dataLabels: {
                        enabled: false
                    }
                }]
            }
        }]
    }
});