如何将Billboard.js的子图表置于主图表上方？

当然支持把子图表放在主图表上方！Billboard.js本身没有限制子图表的默认位置（默认在下方），我们只需要通过自定义CSS样式配合图表配置参数，就能轻松实现这个需求。下面是具体的实现步骤和修改后的完整代码：

实现步骤 #

1. 给主图表预留顶部空间：在图表配置的size选项中添加margin.top，让主图表向下偏移，为子图表腾出顶部区域。
2. 通过CSS调整子图表位置：利用Billboard.js生成的子图表容器类名.bb-subchart，通过绝对定位将其移动到主图表的上方。

修改后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
    <style>
        /* 自定义子图表位置的CSS */
        #SubChart {
            position: relative; /* 让子图表的绝对定位基于这个容器 */
            padding-top: 60px; /* 可选：给容器顶部加内边距，避免子图表贴到页面顶部 */
        }
        
        .bb-subchart {
            position: absolute;
            top: 0; /* 把子图表放在容器顶部 */
            width: 100%;
            height: 50px; /* 自定义子图表高度 */
        }
    </style>
    <title>Billboard.js 子图表在上方示例</title>
</head>
<body>
    <div id="SubChart"></div>
</body>
</html>

JavaScript部分 #

var chart = bb.generate({
    data: {
        columns: [ ["sample", 30, 200, 100, 400, 150, 250] ]
    },
    size:{
        width: 500, 
        height: 250,
        margin: {
            top: 80 // 主图表顶部留80px空间，避免和子图表重叠
        }
    },
    subchart: { 
        show: true,
        size: {
            height: 50 // 子图表高度，要和CSS里的height保持一致
        }
    },
    bindto: "#SubChart"
});

关键说明 #

• 父容器#SubChart设置position: relative，是为了让子图表的绝对定位基于这个容器，而不是整个页面。
• size.margin.top的值要大于等于子图表的高度，确保主图表和子图表不会重叠。
• 你可以根据需求调整subchart.size.height和CSS里的.bb-subchart height，来控制子图表的高度；修改top值可以微调子图表的垂直位置。

内容的提问来源于stack exchange，提问作者knee pain