Gérez plusieurs graphiques en hauteur dans une seule page Web
J'ai plusieurs graphiques en hauteur de différents types (Bar, Pie, Scatter type) sur une seule page Web. Actuellement, je crée un objet de configuration pour chaque graphique comme,
{
chart : {},
blah blah,
}
Et les nourrir à une fonction personnalisée qui appellera simplement HighCharts.chart(). Mais cela entraîne une duplication de 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 procéder?
Vous pouvez utiliser jQuery.extend() et Highcharts.setOptions.
Donc, vous allez d'abord créer 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 méthode 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 à 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 similaires, utilisez Highcharts.setOptions qui appliquera ensuite les options pour tous les graphiques créés.
// `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
Je sais que cela a déjà été répondu, mais je pense que cela peut aller encore plus loin. Je suis encore nouveau sur 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 s'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 objets HTML).
Je n'ai jamais aimé le fait que vous devez fournir un ID d'objet à Highcharts avant qu'il ne dessine le graphique. Ainsi, avec le plug-in, je peux affecter le graphique à l'objet sélecteur jQuery standard, sans avoir à donner le <div> 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 affecter un graphique comme suit:
$('.columnChart').cbhChart('myColumn', optionsArray);
Il s'agit bien sûr d'un exemple simpliste; pour un exemple réel, vous devez créer des propriétés de graphique plus complexes. Mais ce sont 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 graphiques 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, en 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/
Bienvenue à la critique !!
Pour ajouter à la grande réponse de @ Ricardo, j'ai également fait quelque chose de très similaire. En fait, je ne me tromperai pas si je dis que je suis allé plus loin. Je voudrais donc partager l'approche.
J'ai créé un wrapper sur la bibliothèque highchart. Cela donne de multiples avantages, après avoir été les principaux avantages qui ont encouragé à s'engager dans cette voie
- Découplage: Découpe votre code des highcharts
- Easy Upgrades: Ce wrapper sera le seul code qui nécessitera une modification en cas de changements de rupture dans l'api highchart après les mises à niveau, ou même si l'on décide de passer à une bibliothèque de graphiques différents (même à partir de highchart) to highstock peut être exhaustif si votre application utilise beaucoup de graphiques)
- Facile à utiliser: L'API du wrapper est très simple, seules les choses qui peuvent varier sont exposées en tant qu'options (cela aussi dont les valeurs ne seront pas comme un objet js profond comme HC a déjà, principalement 1 niveau profond), chacun ayant une valeur par défaut. Donc, la plupart du temps, la création de notre graphique est très courte, le constructeur prenant 1
optionsobjet avec seulement 4-5 propriétés dont les valeurs par défaut ne conviennent pas au graphique en cours de création - X cohérent: Look & feel cohérent à travers l'application. par exemple: format et position de l'info-bulle, couleurs, famille de polices, couleurs, boutons de la barre d'outils (exportation), etc.
- Évitez la duplication: Bien sûr, en tant que réponse valable à la question posée, il doit éviter la duplication, et cela le fait dans une large 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 devez définir une propriété, ses types principalement vrai/faux, rien de tel que l'horreur que le constructeur highchart attend (sans les critiquer, la quantité d'options qu'ils offrent est tout simplement incroyable du point de vue de la personnalisation, mais pour chaque développeur de l'équipe pour comprendre et maîtriser cela peut prendre un certain temps)
La création d'un graphique est donc aussi simple que
var chart=new myLib.Chart({
chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]]
});