Ouvrir Highcharts dans la fenêtre modale

Je travaille sur un site où je l'utiliser Highcharts assez fortement pour la présentation de données dans les graphiques. Je veux de l'utilisateur pour être en mesure de "zoom" chaque graphique dans une fenêtre modale pour une meilleure lisibilité.

Je sais comment manipuler le graphique avec son API, mais je ne suis pas tout à fait sûr de savoir comment je peux cloner le graphique et consulter le nouveau tableau avec une variable?

J'ai fait beaucoup de recherche, et tout ce que j'ai trouvé est de savoir comment ouvrir dans une fenêtre modale avec Highcharts propre modal de la bibliothèque, mais je suis en utilisant un modal bibliothèque appelée Lightview.

OriginalL'auteur rebellion | 2012-04-01

  1. 1

    Vous pouvez obtenir la nouvelle gamme par la sélection de l'événement, puis obtenir la position correspondante sur le graphique de la serie.
    Voir mon exemple.
    http://jsfiddle.net/ricardolohmann/sZMFh/
    Donc, si vous voulez la montrer à l'intérieur de la lightbox, vous devez changer le code suivant:

    chart2 = new Highcharts.StockChart({
    chart: {
        renderTo: 'container2'
    },
    series: newSeries
});

    À celui-ci, et de définir la container2 affichage à aucun

    Lightview.show({ url: 'container2', type: 'inline' });
    Je dois donc lancer deux graphiques, l'un pour la petite "preview" graphique toujours visible, et l'autre caché pour la modal box?
    C'est l'idée, comme mon exemple.

    OriginalL'auteur Ricardo Alvaro Lohmann

  2. 12

    J'ai eu ce travail à l'aide de jQuery modal panneau.

    Sur cliquez de graphique d'origine je suis de l'appel d'une fonction javascript popupGraph qui permettra de créer un nouveau highchart en fusionnant les options de l'existant highchart. De la clôture de l'événement de modalPanel je suis en détruisant les highchart que nous avons créé pour les popup.

    Espère que cela aide..

    Code réel d'un graphique que j'ai montrer en petite taille. 

    trackingChart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        events: {
            load: loadChart,
            click: function() {
                    popUpGraph(this);
                    }
            }       
    },

    xAxis: {
        categories: []
    },
    yAxis: {
        min: 0,

    },
    legend: {
        layout: 'horizontal',
        backgroundColor: '#FFFFFF',
        align: 'center',
        verticalAlign: 'bottom',
        x: 10,
        y: 0,
        floating: false,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return ''+
                this.x +': '+ this.y +' points';
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 0
        }
    },
    exporting: {
        enabled: false
    },
    series: [{
        data: []

        }, {
            data: []
    }]
});

    Code pour la fonction d'ouverture de panneau modal

          function dummy() {}

       function popUpGraph(existingChart) {
       var options = existingChart.options;
       var popupChart = new Highcharts.Chart(Highcharts.merge(options, {
            chart: {
                renderTo: 'popup_chart',
                height:300,
                width:700,
                        zoomType: 'x',
                events: {
            load: dummy,
            click: dummy
                }
                }
        }));



$( "#dialog").dialog({
        autoOpen: false,
        height: 350,
        width: 750,
        modal: true,
        show:'blind',
        close: function(event, ui) { popupChart.destroy(); }
        });

$("#dialog").dialog("open");

}
    Excellente solution!
    Comment cela peut-il être accompli si les données ont été fournies après l'instanciation?
    Excellent, je pense que vous avez besoin d'ajouter des explications sur le code HTML divs doivent être créés pour rendre le pop-up ou de mettre en œuvre une démo

    OriginalL'auteur Santhosh Suryadevara