График Highstocks не правильно отображается

Question

Здравствуйте, у меня проблема с highstocks при использовании вкладок jquery.

это код для конструктора.

Chart = new Highcharts.StockChart({  
        Chart = new Highcharts.StockChart({
        chart: {
            renderTo: 
                'Container',
                 alignticks:false
             },
        xAxis: { .......... },
        yAxis: [{ ....... }],
        series : [{ .......... }]
    });

Контейнер имеет только половину ширины всей страницы.

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

У кого-нибудь есть решение этой проблемы?

Answer 1

Вы также можете вызвать событие window.resize

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

И Highcharts должен обновить размер диаграммы

Answer 2

Highcharts устанавливает ширину диаграммы в ширину содержащего элемента.Поэтому, если содержащий элемент скрыт, он не может получить ширину.

Чтобы исправить это, вы можете установить параметр ширины при инициализации диаграммы:

Chart = new Highcharts.StockChart({  
    Chart = new Highcharts.StockChart({
    chart: {
          renderTo: ...,
          width: <SOME WIDTH>
        },
    xAxis: { .......... },
    yAxis: [{ ....... }],
    series : [{ .......... }]
});

Если вы невозможность установить правильную ширину диаграммы. Я использовал этот трюк, чтобы получить ширину скрытого элемента:

jQuery: получить высоту скрытого элемента в jQuery

Надеюсь, это поможет.

Answer 3

Я знаю, что прошло много времени после того, как вы задали свой вопрос, но у меня была похожая проблема в том, что мои диаграммы отображались на клиенте с нулевой шириной, когда диаграмма была на вкладке, которая не была активирована по умолчанию.Это связано с тем, что, как указано @brent, в старших диаграммах используется ширина родительского элемента, а в jQuery UI 1.9 виджет вкладок использует встроенный стиль display: none для скрытия неактивных вкладок.

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

Вместо:

$(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Использование:

$('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Answer 4

Вы можете установить ширину div контейнера графика в процентах.

Что-то вроде этого должно работать.

<div id = "tab1"> 
  <div id="graphContainer1" style= "width: 90%"></div>
</div>
<div id = "tab2" style = "display:none"> 
  <div id="graphContainer2" style= "width: 60%"></div>
</div>

Надеюсь, это поможет.

Answer 5

В вашей таблице стилей замените правило для селектора классов ".ui-tabs .ui-tabs-hide" на

.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }

Решение взято из: jQuery UI - вкладки