Скрытие ‹div› при загрузке и отображении события клика не работает должным образом

Я пытаюсь использовать display:none и display:block на своем веб-сайте. Стиль следующий:

<style>
  .div_class {
    display: none;
  }
</style>

Содержимое тела:

<div class="div_class">
   <div id="graph_id"></div>
</div>

Сценарий:

    <script>
      // some event occurs and sets the display property of div_class to block as follows
      $(".div_class").css('display','block'); 

      var BarGraph = echarts.init(document.getElementById('graph_id'), theme);
      BarGraph.setOption({  
       // properties that are set for the echart 'graph_id'
      });
    </script>

display: block; делает div видимым, но установленные свойства диаграммы не отображаются. Div выглядит пустым. В чем может быть причина? Я не могу понять. Пожалуйста, помогите. Спасибо :)

*************************** РЕДАКТИРОВАТЬ ********************** ****************
Кроме того, я думаю, что заголовок может вводить в заблуждение, так как я могу скрыть div при загрузке и отобразить его по щелчку. Но при более позднем рендеринге я столкнулся с определенной проблемой.


javascript html jquery css echarts
person d33a    schedule 25.10.2016    source источник
comment
Какие это свойства? Можете ли вы сделать фрагмент, демонстрирующий проблему?   -  person Mr Lister    schedule 25.10.2016
comment
JavaScript является асинхронным, и отображаемый блок может не произойти раньше, чем ожидалось. Также вы можете попытаться скрыть содержимое div, а не сам div. Видимость скрытая или более продуманный способ будет с фейковым загрузчиком.   -  person Dinca Adrian    schedule 25.10.2016
comment
Я думаю, что название может вводить в заблуждение. Поэтому отредактируйте его так, чтобы оно не вводило в заблуждение.   -  person nnnnnn    schedule 25.10.2016
comment
График появляется через какое-то время или не появляется вообще?   -  person Rajesh    schedule 25.10.2016
comment
@Rajesh Это вообще не появляется   -  person d33a    schedule 25.10.2016
comment
@Ad33 какие-либо ошибки консоли?   -  person madalinivascu    schedule 25.10.2016

Ответы (4)


arrow_upward
0
arrow_downward

Перерисуйте свой BarGraph после показа div

person madalinivascu    schedule 25.10.2016
comment
Почему? OP уже говорит, что их код вызывается в ответ на какое-то событие. - person nnnnnn; 25.10.2016
comment
Если вы читаете прокомментированную часть кода OP, там говорится, что происходит какое-то событие... поэтому я думаю, что это не происходит до рендеринга DOM - person Rajesh; 25.10.2016
comment
Некоторое событие относится к событию клика на другом графике здесь! - person d33a; 25.10.2016

arrow_upward
0
arrow_downward 

 BarGraph .setOption({

работает так же, как

 BarGraph.setOption({

? (избавиться от пробела)

также попробуйте обернуть весь свой код в

$(document).ready(function() {
    ***code here***
});

Редактировать:

https://ecomfe.github.io/echarts-doc/public/tutorial-en.html#Introduction%20of%20ECharts%20features%0D

^ взял код оттуда, добавил jquery в голову, обернул блок диаграммы в div.container с display:none, создал событие клика

$(document).on('click', function() { $(".container").show(); myChart.setOption(option); });

рабочий фрагмент:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- including ECharts file -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>

</head>
<body>
	<style>
    	.container {
    		display: none;
    	}
    </style>
    <!-- prepare a DOM container with width and height -->
  click anywhere!
    <div class="container">
    	<div id="main" style="width: 600px;height:400px;"></div>
    </div>
    <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use configuration item and data specified to show chart
    	$(document).on('click', function() {
    		$(".container").show();
    		myChart.setOption(option);
    	});
    </script>
</body>
</html>

person Bimbonkens    schedule 25.10.2016
comment
Извини. Опечатка с пробелом здесь. Спасибо, что указали на это. И да, я попробую ваше предложение. - person d33a; 25.10.2016
comment
Кажется, это опечатка, иначе приведенный выше блок кода также не работал бы, что привело бы к блокировке div. - person Faisal Ashfaq; 25.10.2016

arrow_upward
-1
arrow_downward

Я пробовал с chart.js. Диаграмма не может быть построена, если для свойства display установлено значение none. Дело в том, что visibility:hidden сохраняет пространство, тогда как display:none не сохраняет пространство

<style>
  .div_class{
      visibility:hidden;
  }
</style>

Попробуйте заменить css кодом выше. Я надеюсь, что это поможет вам :)

Вы можете обратиться к следующему сообщению для получения дополнительной информации: Разница между видимостью: скрытой и отображаемой :нет?

person Rupesh babu Shrestha    schedule 25.10.2016
comment
Я пробовал с chart.js Диаграмма не может быть нарисована, если отображение: ничего не сделано. - person Rupesh babu Shrestha; 25.10.2016
comment
Спасибо, что рассказали. :) Я новичок в stackoverflow, и я использую его всего около недели. - person Rupesh babu Shrestha; 25.10.2016

arrow_upward
-1
arrow_downward 

    <script>
      // some event occurs and sets the display property of div_class to block as follows

      $(".div_class").css('display','block').promise().done(function(){

          //draw graph here

          var BarGraph = echarts.init(document.getElementById('graph_id'), theme);
          BarGraph .setOption({  
           // properties that are set for the echart 'graph_id'
          });

      }); 


    </script>

Попробуйте приведенный выше код. Я добавил .promise(). Что он делает, это только после css "display: block;" применяется, то процесс рисования графика будет запущен

person Rupesh babu Shrestha    schedule 25.10.2016