Проблема с отображением jQuery в Highcharts - все браузеры

У меня есть странная проблема, пытаясь построить таблицу столбчатых столбцов, используя Highcharts

Когда диаграмма отображает, столбцы не отображаются, пока вы не измените размер браузера, в результате чего диаграмма будет перерисована. (Я думаю)! Остальная часть диаграммы отображает (ось, титры и т.д.), Но не сами столбцы.

Я получаю то же поведение в IE, Firefox и хром.

Я поставил свой код на jsfiddle - http://jsfiddle.net/gd7bB/173/ Загрузите его, и вы не увидите никаких данных, измените размер окна браузера и "tada", появятся данные (скорее появятся столбцы)!

Любая помощь по этому вопросу получила бы большую оценку.

Ответы

Ответ 1

Удалить строку chart.render();

Когда вызывается конструктор HighCharts, нет необходимости вызывать render неявно.

Ответ 2

У меня была точно такая же проблема - Highcharts JS v2.1.5 (2011-06-22) не работает с jQuery 1.7.1

После перехода на jQuery 1.6.1 (последний стабильный выпуск, который я использовал), он сработал. Кто-то должен проверить другие версии jQuery.

Ответ 3

У меня была такая же проблема - после загрузки страницы на диаграмме не отображались строки (только название и легенда). После изменения размера браузера или увеличения масштаба диаграмма неожиданно появилась.

Проблема заключалась в jQuery > 1.7 (моя версия теперь 1.8.2) Обновление Highcharts до последней версии (v2.3.3 (2012-10-04)) устраняло проблему (а также другие небольшие проблемы)

Ответ 4

Вам не нужно изменять какую-либо версию Highcharts или Jquery, если вы resize() ваш div-контейнер в конце вашего script.

Например:

$('#div').resize();

Ответ 5

Используя jQuery 1.7.2 + HighCharts 3.0.2, проблема была решена с помощью:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                //When is chart ready?
                $(window).resize(); 
            }
        }        
    }, ..

Это почти то же самое, что и @revo, но использует объект "window" вместо "document".

Ответ 6

Возможно, немного поздно, но у меня была такая же проблема с jQuery 1.9.1, и я не хотел понижать ее для Highcharts с помощью dotnet.highcharts.

если вы создадите новый Highchart например.

.InitChart(new Chart
 {
    DefaultSeriesType = ChartTypes.Line,
    MarginRight = 130,
    MarginBottom = 25,
    ClassName = "chart",
    Events = new ChartEvents { Load = "function(event) { $(document).resize(); }" }
  }) .....

Вы также можете использовать его

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                //When is chart ready?
                $(document).resize(); 
            }
        }        
    }, ..

. строка событий - это то, что вам нужно, тогда вы делаете свою диаграмму

Я надеюсь, что это помогло, у меня было несколько часов, чтобы понять, как это работает:)

Ответ 7

"Не столь деликатное" решение здесь, это то, что окончательно разрешило его для меня.

setTimeout(function() {
                $(window).resize();
            }, 0);

Использование высоких диаграмм с оболочкой, называемой DjangoChartit, с Python Django.