Gérer plusieurs graphiques highchart dans une seule page Web

Je sais que cela a déjà été répondu, mais je pense qu'il peut être pris encore plus loin. Je suis toujours novice en JavaScript et jQuery, donc si quelqu'un trouve quelque chose de mal, ou pense que cette approche enfreint les directives ou les règles de base, je serais reconnaissant pour les commentaires.

En M'appuyant sur les principes décrits par Ricardo Lohmann, j'ai créé un plugin jQuery, qui (à mon avis) permet à Highcharts de fonctionner de manière plus transparente avec jQuery (c'est-à-dire la façon dont jQuery fonctionne avec d'autres Des objets HTML).

Je n'ai jamais aimé le fait que vous deviez fournir un ID d'objet à Highcharts avant de dessiner le graphique. Donc, avec le plug-in, je peux assigner le graphique à l'objet jQuery selector standard, sans avoir à donner au <div> contenant une valeur id.

(function($){
    var chartType = {
        myArea : {
            chart: { type: 'area' },
            title: { text: 'Example Line Chart' },
            xAxis: { /* xAxis settings... */ },
            yAxis: { /* yAxis settings... */ },
            /* etc. */
            series: []
        },
        myColumn : {
            chart: { type: 'column' },
            title: { text: 'Example Column Chart' },
            xAxis: { /* xAxis settings... */ },
            yAxis: { /* yAxis settings... */ },
            /* etc. */
            series: []
        }
    };
    var methods = {
        init:
            function (chartName, options) {
                return this.each(function(i) {
                    optsThis = options[i];
                    chartType[chartName].chart.renderTo = this;
                    optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);
                    new Highcharts.Chart (optsHighchart);
                });
            }
    };
    $.fn.cbhChart = function (action,objSettings) {
        if ( chartType[action] ) {
            return methods.init.apply( this, arguments );
        } else if ( methods[action] ) {
            return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
        } else if ( typeof action === 'object' || !action ) {
            $.error( 'Invalid arguments to plugin: jQuery.cbhChart' );
        } else {
           $.error( 'Action "' +  action + '" does not exist on jQuery.cbhChart' );
        }
    };
})(jQuery);

Avec ce plug-in, je peux maintenant attribuer un graphique comme suit:

$('.columnChart').cbhChart('myColumn', optionsArray);

Ceci est un exemple simpliste bien sûr; pour un exemple réel, vous devrez créer des propriétés de graphique plus complexes. Mais c'est la les principes qui nous concernent ici, et je trouve que cette approche répond à la question initiale. Il réutilise le code, tout en permettant aux modifications de graphique individuelles d'être appliquées progressivement les unes sur les autres.

En principe, il vous permet également de regrouper plusieurs appels Ajax en un seul, poussant les options et les données de chaque graphique dans un seul tableau JavaScript.

L'exemple obligatoire de jFiddle est ici: http://jsfiddle.net/3GYHg/1/

Critique Bienvenue!!

Pour ajouter à la bonne réponse de @Ricardo, j'ai aussi fait quelque chose de très similaire. En fait, je ne me tromperai pas si je disais que je suis allé un peu plus loin que cela. Par conséquent, je voudrais partager l'approche.

J'ai créé un wrapper sur la bibliothèque highchart. Cela donne de multiples avantages, suivants étant les principaux avantages qui ont encouragé à aller dans cette voie

• découplage: Découplez votre code de highcharts
• mises à jour faciles: ce wrapper sera le seul code qui nécessitera une modification en cas de modification de l'api highchart après les mises à niveau, ou même si l'on décide de passer à une bibliothèque de graphiques différente (même de highchart à highstock peut être exhaustif si votre application utilise intensivement des graphiques)
• facile d'utilisation: l'api wrapper est très simple, seules les choses qui peuvent varier sont exposées en tant qu'options (celles aussi dont les valeurs ne seront pas comme un objet JS profond comme HC a déjà, la plupart du temps 1 niveau profond), chacune ayant une valeur par défaut. Donc, la plupart du temps, notre création de graphique est très courte, le constructeur prenant 1 options Objet avec seulement 4-5 propriétés dont les valeurs par défaut ne conviennent pas au graphique sous creation
• UX cohérent: look & feel cohérent à travers l'application. par exemple: outil tip format et position, Couleurs, Famille de polices, couleurs, barre d'outils (exportation) boutons, etc
• éviter la duplication: Bien sûr, comme une réponse valide à la question posée, il doit éviter duplication, et il le fait dans une énorme mesure

Voici à quoi ressemblent les options avec leurs valeurs par défaut

defaults : {
        chartType : "line", 
        startTime : 0,
        interval : 1000,
        chartData : [],
        title : "Product Name",
        navigator : true,
        legends : true,
        presetTimeRanges : [],
        primaryToolbarButtons : true,
        secondaryToolbarButtons : true,
        zoomX : true,
        zoomY : false,
        height : null,
        width : null,
        panning : false,
        reflow : false,
        yDecimals : 2,
        container : "container",
        allowFullScreen : true,
        credits : false,
        showAll : false,
        fontSize : "normal", // other option available is "small"
        showBtnsInNewTab : false,
        xAxisTitle : null,
        yAxisTitle : null,
        onLoad : null,
        pointMarkers : false,
        categories : []
}

Comme vous pouvez le voir, la plupart du temps, c'est juste chartData qui change. Même si vous avez besoin de définir une propriété, ses types principalement vrai/faux, rien de tel que l'horreur que le constructeur highchart attend (ne pas les critiquer, la quantité d'options qu'ils fournissent est tout simplement incroyable du point de vue de la personnalisation, mais pour chaque développeur de l'équipe à comprendre et maîtriser il peut prendre un certain temps)

Donc la création du graphique est aussi simple que

var chart=new myLib.Chart({
              chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]]
         });