Gérer plusieurs graphiques highchart dans une seule page Web

J'ai plusieurs graphiques highchart de différents types (Bar,Pie, Type Scatter) dans une seule page web. Actuellement, je crée un objet de configuration pour chaque graphique comme,

{
chart : {},
blah blah,
}

Et en les alimentant à une fonction personnalisée qui appellera simplement HighCharts.chart(). Mais cela entraîne une duplication du code. Je veux gérer toute cette logique de rendu de graphique de manière centralisée.

Une idée sur la façon de le faire?

26
demandé sur Ricardo Alvaro Lohmann 2011-11-24 11:39:13

3 réponses

, Vous pouvez utiliser jQuery.extend() et Highcharts.setOptions.
Donc, d'abord, vous allez faire le premier objet qui sera étendu par tous vos graphiques, cet objet contiendra vos fonctions par défaut Highchart.

Vous pouvez le faire en utilisant l'espace de noms.
la manière suivante est bonne lorsque vous avez des graphiques très différents.

Graphique par défaut:

var defaultChart = {
    chartContent: null,
    highchart: null,
    defaults: {

        chart: {
            alignTicks: false,
            borderColor: '#656565',
            borderWidth: 1,
            zoomType: 'x',
            height: 400,
            width: 800
        },

        series: []

    },

    // here you'll merge the defauls with the object options

    init: function(options) {

        this.highchart= jQuery.extend({}, this.defaults, options);
        this.highchart.chart.renderTo = this.chartContent;
    },

    create: function() {

        new Highcharts.Chart(this.highchart);
    }

};

Maintenant, si vous voulez créer un graphique en colonnes, vous allez étendre defaultChart

var columnChart = {

    chartContent: '#yourChartContent',
    options: {

        // your chart options
    }

};

columnChart = jQuery.extend(true, {}, defaultChart, columnChart);

// now columnChart has all defaultChart functions

// now you'll init the object with your chart options

columnChart.init(columnChart.options);

// when you want to create the chart you just call

columnChart.create();

Si vous avez des graphiques semblables utiliser Highcharts.setOptions, qui s'appliquera les options pour tous les graphiques créés après cela.

// `options` will be used by all charts
Highcharts.setOptions(options);

// only data options
var chart1 = Highcharts.Chart({
    chart: {
        renderTo: 'container1'
    },
    series: []
});

var chart2 = Highcharts.Chart({
    chart: {
        renderTo: 'container2'
    },
    series: []
});

Référence

DÉMO COMPLÈTE

40
répondu Ricardo Alvaro Lohmann 2014-10-20 21:49:17

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!!

6
répondu cartbeforehorse 2012-11-20 22:13:24

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]]
         });
4
répondu Jugal Thakkar 2012-08-20 17:35:59