Gérer plusieurs highchart graphiques dans une seule page web

Vous pouvez utiliser jQuery.extend() et Highcharts.setOptions.

Donc, vous allez d'abord faire le premier objet qui va être étendu par l'ensemble de vos graphiques, cet objet va contenir votre Highchart fonctions par défaut.

Vous pouvez le faire en utilisant namespacing.

La façon suivante est bon quand vous avez très différents graphiques.

Graphiques 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 faire un graphique en colonnes, vous étendrez 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 utilisation Highcharts.setOptions qui permet d'appliquer les options de tous créé des graphiques après ce.

//`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

• http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29

DÉMO COMPLÈTE

À ajouter à @Ricardo grande réponse, j'ai aussi fait quelque chose de très similaire. En fait, je ne serai pas de mal, si je l'ai dit, je suis allé une étape plus loin que cela. D'où tiens à partager la démarche.

J'ai créé un wrapper sur le highchart de la bibliothèque. Cela donne de multiples avantages, à la suite d'être les principaux avantages qui les encourage à aller dans cette voie

• Découplage: Dissocie le code de highcharts
• Faciliter les mises à jour: Ce wrapper sera le seul code qui nécessitera une modification en cas de modifications importantes dans highchart api après des mises à jour, ou même si l'on décide de passer à un divers graphiques de la bibliothèque de tout (même de highchart à highstock peut être exhaustive si votre application utilise des graphiques beaucoup)
• Facile d'utilisation: Le wrapper de l'api est très simple, seulement des choses qui peuvent varier sont exposées comme des options (Que trop) dont les valeurs ne seront pas comme une profonde js objet comme HC a déjà, pour la plupart 1 niveau de profondeur), chacune ayant une valeur par défaut. Donc la plupart du temps, notre la création de graphique est très court, avec le constructeur prenant 1 options objet avec seulement 4-5 propriétés dont les valeurs par défaut ne conviennent pas au tableau sous la rubrique création
• Cohérente UX: Cohérente look & feel de l'application. par exemple: outil format conseil & position, les couleurs, la police, les couleurs, la barre d'outils (exportation) des boutons, etc
• D'éviter la duplication: bien sûr, comme une réponse valable à la question posée, il a à éviter les doubles emplois, et il le fait à une énorme mesure

Voici ce que le options ressemble 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 devez configurer certains biens, de ses essentiellement de vrai/faux types, rien de tel que l'horreur que highchart constructeur attend (pas le critiquant eux, le montant des options qu'elles offrent n'est tout simplement incroyable de personnalisation de Point de Vue, mais pour tous les développeurs dans l'équipe pour comprendre & maître, il peut prendre un certain temps)

Donc la création de graphique est aussi simple que

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