DotNet highchart asp.net с навигационными вкладками самозагрузки

-1

Есть что-то, что я хотел бы спросить о, например, это мой код, когда я хочу, чтобы отобразить с помощью этой ссылки https://codepen.io/wizly/pen/BlKxo/ с Dotnet Highcharts или HighchartsDotNet highchart asp.net с навигационными вкладками самозагрузки

<div class="container"><h2>Example 3 </h2></div> 
     <div id="exTab3" class="container"> 
     <ul class="nav nav-pills"> 
      <li class="active"> 
       <a href="#1b" data-toggle="tab">Tab 1</a> 
      </li> 
      <li> 
       <a href="#2b" data-toggle="tab">Tab 2</a> 
      </li> 
     </ul> 

     <div class="tab-content clearfix"> 
      <div class="tab-pane active" id="1b"> 
       <div id=" chartContainerPies" style="width:100%;height:600px;"> 
        <asp:literal id="chartContainerPie" runat="server" ></asp:literal> 
       </div> 
      </div> 
      <div class="tab-pane" id="2b"> 
       <div id="chartContainerColumns" style="width:100%;height:500px;"> 
        <asp:Literal id="chartContainerColumn" runat="server"></asp:Literal> 
       </div> 
      </div> 
     </div> 
    </div>

и результат от этого кодирования будет отображаться в веб-браузере

однако, второй результат вкладке нав стать этим. Как вы можете видеть, размер диаграммы уменьшается до 50% от исходного графика.

проблема заключается в том, чтобы сделать результат во второй вкладке явно схож с первой вкладкой? любое предложение по этой проблеме? Большое спасибо

Обновлено: после того, как я поставил границы, то это результат

источник

2016-12-18 Faris Fajar

Для div id = "2b" можете ли вы поместить это: 'style =" border: solid "' и посмотреть, где находятся границы для div, а затем сделать это для этой «id =» chartContainerColumns ». Обычно я делаю это во время разработки, чтобы понять, в чем проблема. Зачастую это помогает мне сузить проблему до конкретного элемента. – CodingYoshi

Я обновил результат, исходя из вашей озабоченности. это потому, что активный класс или что-то еще? –

Таким образом, это показывает, что он имеет тот же размер, что и другая вкладка. Теперь сделайте то же самое для элементов управления детьми и посмотрите, какая из них отличается, поэтому вы можете увидеть, что проблема с конкретным элементом. – CodingYoshi

Этот пост является прямой ответ от ryenus в Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

The Cause

Это не проблема с Highcharts, по крайней мере сама по себе, проблема связана с тем, что Bootstrap использует отображение: none для скрытия неактивных вкладок:

.tab-content > .tab-pane, .pill-content > .pill-pane { 
    display: none;  /* this is the problem */ 
}

Это приводит к тому, что Highcharts не может получить ожидаемую ширину для инициализации диаграммы, поэтому значение по умолчанию составляет 600 пикселей. Это произойдет с другими инструментами, используя тот же подход для скрытия контента.

Чистого CSS Решение

Вместо того чтобы работать вокруг проблемы с дополнительной перерисовкой или несвоевременной инициализацией, мы можем достичь скрытого эффекта, используя высоту: 0; Переполнение-у: скрытый, таким образом скрытые вкладки стекло все еще на месте и имеющие действительную ширину:

/* bootstrap hack: fix content width inside hidden tabs */ 
.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) { 
    display: block; 
    height: 0; 
    overflow-y: hidden; 
} 
/* bootstrap hack end */

Обновление: предыдущее решение 2-шага первого скрывающее все вкладки, а затем делает активную вкладку видимой. Для сравнения, теперь у нас есть одношаговое решение, которое непосредственно нацелено на неактивные вкладки.

Это решение является бесшовным, поэтому вам больше не нужно беспокоиться, находится ли диаграмма внутри панели вкладок или нет. И он эффективен, так как он устраняет проблему ширины в первую очередь, поэтому нет необходимости обходить проблему ширины после этого с помощью изменения размера/перерисовки/пересчета с помощью javascript.

Примечание о каскадном заказе

Этого патча должно быть загружено после начальной загрузки CSS, из-за правила порядка CSS каскадных, короче говоря, последнее правило выигрывает.

так, для тех, кто имеет такую же проблему при размещении более чем одной диаграммы на вкладках nav, это поможет вам в решении этой проблемы.

источник

2017-01-15 06:44:12

DotNet highchart asp.net с навигационными вкладками самозагрузки

ответ

Смежные вопросы