web-dev-qa-db-fra.com

Highcharts problème de rendu jQuery - tous les navigateurs

J'ai un problème étrange lorsque je tente de créer un graphique à colonnes empilées à l'aide de Highcharts

Lorsque le graphique s'affiche, les colonnes ne s'affichent pas jusqu'à ce que vous redimensionniez le navigateur in, ce qui a pour effet de redessiner le graphique. (Je pense)! Le reste du graphique est affiché (axe, titres, etc.) mais pas les colonnes elles-mêmes. 

J'ai le même comportement dans IE, Firefox et Chrome. 

J'ai mis mon code sur jsfiddle - http://jsfiddle.net/Gd7bB/173/ Chargez-le et vous ne devriez voir aucune donnée, redimensionner la fenêtre du navigateur et "tada", les données apparaît (plutôt les colonnes apparaissent)! 

Toute aide sur celui-ci serait massivement appréciée. 

javascriptjqueryhighcharts
23
Matt

Supprimer la ligne chart.render(); 

Lorsque le constructeur HighCharts est appelé, il n'est pas nécessaire d'appeler implicitement render.

6
Igor Dymov

J'ai eu exactement le même problème - Highcharts JS v2.1.5 (2011-06-22) ne fonctionne pas avec jQuery 1.7.1

Après le passage à jQuery 1.6.1 (la dernière version stable que j'ai utilisée), cela a fonctionné. Quelqu'un devrait vérifier les autres versions de jQuery.

7
Glycerine

J'ai eu le même problème - après le chargement de la page, le graphique n'affichait pas les lignes (uniquement le titre et la légende). Après un redimensionnement du navigateur ou un zoom, le graphique est apparu subitement.

Le problème était avec jQuery> 1.7 (ma version est maintenant la 1.8.2) La mise à jour des tableaux de hiérarchie vers la dernière version (v2.3.3 (2012-10-04)) a corrigé le problème (ainsi que d'autres problèmes mineurs )

6
Asped

Vous ne devez modifier aucune version de Highcharts ou Jquery si vous resize() votre div-container à la fin de votre script.

Par exemple:

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

Avec jQuery 1.7.2 + HighCharts 3.0.2, le problème a été résolu en utilisant:

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

C'est presque la même chose que @ revo, mais utilise l'objet 'window' au lieu de 'document'.

2
lomantpa

Peut-être un peu tard, mais jQuery 1.9.1 posait le même problème et je ne voulais pas le rétrograder pour Highcharts avec dotnet.highcharts. 

si vous créez un nouveau Highchart ici , par exemple.

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

Vous pouvez aussi l'utiliser 

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

. la ligne des événements est ce dont vous avez besoin, puis vous rendez votre graphique

J'espère que ça a aidé, j'ai eu quelques heures pour comprendre comment ça marche :)

1
revo

La solution "pas si délicate" ici , est ce qui a finalement été résolu pour moi.

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

Utilisation de Highcharts avec un wrapper appelé DjangoChartit, avec Python Django.

0
PhoenixDev