Question

我正在研究Highcharts。我也使用Bootstrap作为标签。我有两个图表，每个图表我想在不同的标签中显示。不知怎的，我在第一个标签中得到了正确的第一个图表。但第二个标签是空的。请在下面找到我的代码。

HTML

<div class="container">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">Quarterly</a></li>
          <li><a data-toggle="tab" href="#menu1">Waterline</a></li>
        </ul>

        <div class="tab-content">
          <div id="home" class="tab-pane fade in active">
            <br/><br/>
            <select id="dropdown">
              <option>Portfolio</option>
            </select>
            <br/><br/><br/>
            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
          <div id="menu1" class="tab-pane fade">
            <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
        </div>
      </div>

JS

$('#home').click(function () {
        alert("left");
        $('#left').highcharts().reflow();
      });
      $('#menu1').click(function () {
        alert("right");
        $('#right').highcharts().reflow();
});

另外，如果你能看到我也发出警告信息。它根本没有运行？虽然第一个标签工作正常。

请建议。 TIA。

已解决：从此处：Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

Answer 1

我找到了上面提到的问题的答案。请找到以下解决方案：

<强> CSS

<style type="text/css">
      .tab-content .tab-pane .highcharts-container {
          border: 0px;
      }

      .tab-content > .tab-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
      }

    .tab-content > .active {
        height: auto;
    }

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:active {
        outline:none;
    }
    </style>
    <style type="text/css">
      #left, #right{
        float: left;
    }
    </style>

<强> HTML

<div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">Chart 1</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Chart 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="one" >
                            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>

                        <div class="tab-pane" id="two" >
                          <br/><br/><br/>
                          <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div> 
            </div>
        </div>
    </div>

我通常在某些功能中调用Highcharts。下面有一个小代码片段。只是提到几个人它是如何来的。仅显示一个图表，仅显示。

<强> JS

$('#left').highcharts({
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Some Title'
              },
              xAxis: {
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: ''
                  }
              }, // Like this further inputs for Highcharts.

注意：以上的高级代码仅用于演示并且不完整。

我希望这个解决方案能有所帮助。谢谢你的时间。

Answer 2

问题是点击事件是在你自己点击标签内部时触发的......

如果您希望在选项卡导航栏上clic时重排图表，则需要为元素添加click事件监听器

events = struct;
for i=1:200
    events.( ['EVE' num2str(i)] ) = [];
end

因为当bootstrap呈现标签时，它会为标签创建导航栏...看看这张图片中的html结果......

Answer 3

您的问题是您的点击处理程序;它们是在您单击选项卡主体而不是选项卡本身时配置的。因此，如果您单击选项卡2上的空白区域，您将收到警报。

正如我所看到的，你有2个简单的解决方案来解决这个问题。

解决方案1  更新您的标签以获得ID，并相应地更新您的JavaScript点击处理程序。

HTML

<ul id="myTabs" class="nav nav-tabs">
    <li class="active"><a id="home-tab" data-toggle="tab" href="#home">Quarterly</a></li>
    <li><a id="menu-tab" data-toggle="tab" href="#menu1">Waterline</a></li>
</ul>

JS

$('#home-tab').click(function () {
    alert("left");
    $('#left').highcharts().reflow();
});

$('#menu-tab').click(function () {
    alert("right");
    $('#right').highcharts().reflow();
});

解决方案2

使用单击处理程序使用逻辑来确定如何处理选项卡。

HTML

<div class="container">
  <ul id="myTabs" class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" data-tableId="left">Quarterly</a></li>
    <li><a data-toggle="tab" href="#menu1" data-tableId="right">Waterline</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      Home Tab
      <select id="dropdown">
        <option>Portfolio</option>
      </select>
      <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
    </div>
    <div id="menu1" class="tab-pane fade">
      Menu 1 Tab
      <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
    </div>
  </div>
</div>

JS

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $("#" + e.target.dataset.tableid)).highcharts().reflow();
  $(this).tab('show');
});

我认为解决方案2更好，因为它允许您拥有一个可以处理所有选项卡的jquery函数。它只需要UL上的Id和每个选项卡上的数据属性。

高等专科学校Bootstrap：选项卡2上的图表未显示。虽然第一张图表工作正常

3 个答案: