Калибровка C3 слишком велика при первоначальной загрузке

Я использую библиотеку C3 JavaScript для отображения данных графа. Когда моя страница изначально загружается, графики скрыты. Пока не будет выбрана "вкладка" на странице, отображающая графики.

Проблема, которую я вижу, заключается в том, что мой первый график не соответствует его содержащему тегу div при первой загрузке. Я могу изменить диапазон дат, на который я просматриваю данные, нажав кнопку, и в это время графики будут иметь правильный размер.

Вот соответствующий HTML, который я использую для графиков (обратите внимание, что я использую AngularJS, если это вообще помогает/препятствует):

<div class="chartgrouping">

<div ng-show="showGraphSection" class="graphA">
    <h2 class="section-main-heading">Data A</h2>
    <div id="dataAChart" class="chart c3"></div>
</div>
<div ng-show="showGraphSection" class="graphB">
    <h2 class="section-main-heading">Data B</h2>
    <div class="stats">
        <div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div>
        <div class="goals">GOAL: 20%</div>
    </div>
    <div id="dataBChart" class="c3" style="max-height: 320px; position: relative;"></div>
</div>

</div>

Исходный, неправильный дисплей (первый график растягивается весь путь): initial, incorrect width on first graph

И правильный результат после загрузки новых данных после первого результата (выше) был отображен: graphs with correct width

Есть ли хорошее решение этой проблемы?

ОТВЕТЫ

Ответ 1

Я нашел решение связано с тем, как он определяет полную ширину элемента при скрытии (часто в случае использования вкладок начальной загрузки и т.д. и других скрытых элементов).

Чтобы обойти это, вам нужно вызвать событие изменения размера в окне, чтобы сделать d3 (базовую библиотеку графиков), чтобы выработать правильный размер.

jQuery(window).trigger('resize');

Вы можете сделать это при загрузке, используя что-то похожее на

jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() { jQuery(window).trigger('resize'); });

Ответ 2

В моем случае ответ @Flanamacca работает только частично. Загрузка данных диаграммы с помощью setTimeout с задержкой 0 кажется исправленной.

Ответ 3

Попробовав множество возможностей, я наконец нашел решение. Это решение Angular, поэтому любой другой, испытывающий проблему и не использующий Angular, должен будет соответствующим образом изменить его.

Как я решил, что это было, вместо использования ng-show в родительском div, я удалил его и добавил точные копии его в каждый субтег (h2 и h2s). Простое решение, но такая боль, чтобы понять.

Ответ 4

Материал jQuery(window).trigger('resize'); не работал у меня. Но использование функции C3 resize ( ) работает как босс:

var chart = c3.generate({
bindto: '#chart',
data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 0],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
        data1: 'area',
        data2: 'area-spline'
    }
}
});


$('.collapse').on('shown.bs.collapse', function() {//Your event listner
    chart.resize();

});

Ответ 5

Если вы используете Foundation с несколькими вкладками, то для меня работало следующее:

$('#myPanelId' ).on('toggled', function(){
        jQuery(window).trigger('resize');
 })

Где myPanelId - идентификатор панели, который содержит диаграммы.

Ответ 6

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

Для меня работал метод c3 flush(), который заставляет диаграмму перерисовывать (см. http://c3js.org/reference.html#api-flush).

$('a[data-toggle=tab]').on('shown.bs.tab', function() {
  my_c3_chart.flush();
});

Ответ 7

Просто настройка максимальной ширины CSS div, содержащей диаграмму, работала для меня.

Ответ 8

Наши ситуации могут быть другими, но, возможно, кто-то с более полным пониманием того, как рендерит HTML, может извлечь из этого информацию.

Моя проблема заключалась в том, что я скрывал график, пока мои данные не были извлечены, и график был создан с помощью c3.generate. Я скрывал график, используя css "display: none;". это было то, что вызвало проблему. Как только я изменил свой CSS на "Непрозрачность: 0", проблема исчезла.