0

Pie1 がデフォルトで表示されます。Pie2 または Pie3 のドロップダウンをクリックすると、DIV が空白のままになり、Pie1 をもう一度選択すると、echarts_Pie1 が返されます。pie2 と pie3 のドロップダウンが機能しません。

<script language="javascript">
    ivan = {};
    ivan.showhide = function(val1)
    {
      if(val1 == 1)
      {     
        document.getElementById('echart_pie1').style.display = "";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 2)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 3)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "";
      }

    }      
    </script>

Pie1 がデフォルトで表示されます。Pie2 または Pie3 のドロップダウンをクリックすると、DIV が空白のままになり、Pie1 をもう一度選択すると、echarts_Pie1 が返されます。pie2 と pie3 のドロップダウンが機能しません。

<div class="col-md-3 col-sm-4 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Storage</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                         <option onclick="ivan.showhide(1)">Pie1</option>
                         <option onclick="ivan.showhide(2)">Pie2</option>
                          <option onclick="ivan.showhide(3)">Pie3</option>
                          </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div id="echart_pie1" style="height:180px;"></div>
                        <div id="echart_pie2" style="height:180px; display:none;"></div>
                        <div id="echart_pie3" style="height:180px; display:none;"></div>                           

                  </div>
4

5 に答える 5

0

onclick 関数はオプション要素では機能しません! オプションの形式を少し変更してみてください

<select class="dropdown-menu" role="menu" onchange="ivan.showhide(this.value)">
              <option value="1">Pie1</option>
              <option value="2">Pie2</option>
              <option value="3">Pie3</option>
</select>
于 2016-07-05T05:17:45.100 に答える
0

echarts ライブラリでは、グラフィックの生成中にコンテナーを表示する必要がある場合があるためdisplay:none、HTML からスタイルを削除することをお勧めします。

<ul role="menu">
  <option onclick="ivan.showhide(1)">Pie1</option>
  <option onclick="ivan.showhide(2)">Pie2</option>
  <option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px;"></div>
<div id="echart_pie3" style="height:180px;"></div>

JavaScript コードには、次のような呼び出しでグラフィックを初期化するコードがあります。

var echartPie1 = echarts.init(document.getElementById('echart_pie1'), theme); 
// ... etc

そのコードの直後に、次の行を追加します。

ivan.showhide(1);

ivanこれはもちろん、この時点ですでに定義済みであることを前提としています。そうでない場合は、その定義を最初に置き、次に上記の行をその下に追加します。

単純化

showhide問題とは関係ありませんが、関数を次のように単純化できることに注意してください。

ivan = {};
ivan.showhide = function(val1)
{
    document.getElementById('echart_pie1').style.display = val1 !== 1 ? "none" : "";
    document.getElementById('echart_pie2').style.display = val1 !== 2 ? "none" : "";
    document.getElementById('echart_pie3').style.display = val1 !== 3 ? "none" : "";
}

ページの読み込み時に 3 つのグラフすべてが点滅する場合

おそらく、ページが読み込まれると、ページに 3 つのグラフすべてがほんの一瞬表示されることがあります。それが問題である場合は、これを試してください。ただし、元の問題が再発する可能性があります。

  • タグにスタイルvisibility: hiddenを追加します。ul

    <ul role="menu" style="visibility: hidden">

  • を呼び出したら、そのスタイルを削除しますshowhide(1)。

     ivan.showhide(1);
 document.querySelector('ul[role=menu]').style.visibility = 'visible';
于 2016-07-04T12:34:52.060 に答える