Когда я нажимаю на вкладку с Google Chart, сначала она отображается маленьким, а стиль ширины не применяется:
Но когда я изменяю размерокно «прыгает» так, как должно выглядеть:
Я хотел бы увидеть его с самого начала, так как оно масштабируется на втором изображении,Вот одна вещь, которую я заметил: после того, как он «перескакивает» в правильный формат, если я перехожу на предыдущую вкладку и даже немного изменяю размер окна, когда я нажимаю на вкладку «Макросы», она снова становится маленькой.
Это код:
<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script src="https://www.google.com/jsapi?fake=.js"></script>
<script>
$(window).on("throttledresize", function (event) {
var options = {
width: '100%',
height: '100%'
};
var data = google.visualization.arrayToDataTable([]);
drawChart(data, options);
});
</script>
CSS из заголовка:
<style>
#chart_wrap {
position: relative;
padding-bottom: 100%;
height: 0;
overflow:hidden;
}
#piechart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
И HTML-код - я использую Semantic UI:
<div class="ui tab segment" data-tab="macros">
<div id="chart_wrap">
<div id="piechart"></div>
</div>
</div>