css - 使用 CSS 使图表彼此靠近

Question

我有两个图表。一个比另一个大。较大的一个由两个标签组成，称为 a 和 b。小的由标签 c 和 d 组成。两个图表的代码类似如下。

var chart = c3.generate({
    data: {
        columns: [
            ['Rra', 3880],
            ['b', 50],
        ],
        type : 'donut'

    },


});


var chart = c3.generat
       size: {
        height: 200,
        width: 450
    },
    data: {
        columns: [
            ['c', 50],
            ['d', 50],
        ],

    },


});

我想知道是否可以在大图表的空白区域之间移动小图表。所以它们最终看起来像两个分层图表。我确实检查了小图表上的元素，并尝试使用 css 将 transform="translate(225,83)" 调整为不同的值。但是我注意到当小图表接近大图表时它的部分消失了。

我不是 CSS 或图表库方面的专家，但很想了解如何实现这一点。这是我的 FIDDLE

Answer 1

虽然我同意 YourConscious 的回答(使用 d3 插件创建你想要的而不是使用 hacky CSS)，但这是我想出的 CSS 方法:

.chart_container{
    position:relative;
}

#chart1{
    position:absolute !important;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

您可以在这个 Fiddle 中看到它的实际效果

神奇的是将两个图表都包装在一个容器 div 中，将其设置为 position:relative; 这样您就可以将较小的图表放在其中。然后为您的小图表提供上述样式，使其始终位于大图表的中间。

!important 在那里是因为插件似乎放置了 position:relative 的内联样式