Загрузите div одним щелчком мыши

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

UPDATE: Я приложил код, так что вы можете скрыть и показать на нажатия на ту же кнопку: 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 
    }, 


});