highcharts嵌套双环图双饼图

最新推荐文章于 2024-07-26 15:37:42 发布

楚念悠

最新推荐文章于 2024-07-26 15:37:42 发布

阅读量4.2k

点赞数

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

本文链接：https://blog.csdn.net/jpjp2020/article/details/86640063

版权

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

摘要由CSDN通过智能技术生成

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

先上图

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:

//双圆环图

关注