Question

我有一张图表，它是2个甜甜圈图表。一个更大，一个更小。较小的图表放在较大的图表中。我想知道是否通过点击按钮加载更大的图表。我尝试了这个，但遇到了问题，因为较小的图表位置是相对于较大图表的位置。所以我想知道是否有一些css技巧可以做到这一点？我也使用角js。这是我的FIDDLE

这是我的图表代码

var chart = c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['a', 30],
            ['b', 50],
        ],
        type : 'donut'

    },
       legend: {
        show: false
    },       


});


var chart = c3.generate({
    bindto: "#chart1",
       size: {
        height: 200,
        width: 450
    },
    data: {
        columns: [
            ['c', 50],
            ['d', 50],
        ],
        type : 'donut'

    },
      legend: {
        show: false
    },


});

Answer 1

为什么不在加载时为不大的图表指定0的不透明度，并使用javascript在点击时指定不透明度为1。如果你真的喜欢冒险，你可以投入一些过渡。

.fadeIn {
   opacity: 1 !important;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinner;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinner;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: once;
    -ms-animation-timing-function: linear;
}

以下是我所谈论的一个例子：jsfiddle

更新：我添加了代码，以便您可以在单击相同按钮时隐藏和显示： jsfiddle

Answer 2

你可以为它添加一个容器和一个固定的高度（假设你的外面的甜甜圈总是有相同的高度），检查这个fiddle。

HTML：

<div class="chart_container">
    <div class="chart-container">
      <div id="chart"></div>
    </div>
    <div id="chart1"></div>
</div>
<button id="button">Click me</button>

CSS

.chart_container{
    position:relative;
}
.chart-container {
    min-height: 320px;    
}
#chart1{
    position:absolute !important;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

JS

document.getElementById("button").addEventListener("click", function(){
var chart = c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['a', 30],
            ['b', 50],
        ],
        type : 'donut'

    },
       legend: {
        show: false
    },       


});

});


var chart = c3.generate({
    bindto: "#chart1",
       size: {
        height: 200,
        width: 450
    },
    data: {
        columns: [
            ['c', 50],
            ['d', 50],
        ],
        type : 'donut'

    },
      legend: {
        show: false
    },


});

点击加载div

2 个答案: