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

Question

У меня странная проблема, когда я пытаюсь построить столбчатую диаграмму с накоплением, используя Highcharts

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

У меня такое же поведение в IE, Firefox и Chrome.

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

Любая помощь по этому вопросу будет принята с благодарностью.

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Например:

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

Answer 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'.

Answer 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(); 
            }
        }        
    }, ..

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

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

Answer 7

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

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

Использование старших графиков с оболочкой DjangoChartit и Python Django.