pie - highcharts drilldown

Administre múltiples cuadros de Highchart en una sola página web

Question

Estoy teniendo varios diagramas de cuadros múltiples de varios tipos (Bar, Pie, Tipo de dispersión) en una sola página web. Actualmente estoy creando un objeto de configuración para cada gráfico, como

{
chart : {},
blah blah,
}

Y alimentarlos a una función personalizada que simplemente llamará a HighCharts.chart() . Pero esto da como resultado la duplicación del código. Quiero administrar toda esta lógica de representación gráfica de forma centralizada.

¿Alguna idea de como hacerlo?

Answer 1

Para agregar a la gran respuesta de @ Ricardo, también he hecho algo muy similar. De hecho, no me equivocaré si digo que di un paso más allá de esto. Por lo tanto, me gustaría compartir el enfoque.

He creado un contenedor sobre la biblioteca Highchart. Esto le otorga múltiples beneficios, luego de ser las principales ventajas que incentivó ir por este camino

• Desacoplamiento: desacopla su código de las notas altas
• Actualizaciones sencillas: este contenedor será el único código que requerirá modificación en caso de cualquier cambio de rotura en la api Highchart después de las actualizaciones, o incluso si uno decide moverse a una biblioteca de gráficos diferente por completo (incluso de Highchart a Highstock puede ser exhaustivo si aplicación usa gráficos extensamente)
• Fácil de usar: la API de envoltura se mantiene muy simple, solo las cosas que pueden variar se muestran como opciones (también aquellos cuyos valores no serán como un objeto js profundo como HC, mayormente 1 nivel), cada uno tiene un valor por defecto valor. Así que la mayoría de las veces nuestra creación de gráficos es muy corta, con el constructor tomando 1 objeto de options con solo 4-5 propiedades cuyos valores predeterminados no se ajustan al gráfico en la creación
• UX coherente: apariencia uniforme en toda la aplicación. por ejemplo: formato y posición de la punta de la herramienta, colores, familia de fuentes, colores, botones de la barra de herramientas (exportación), etc.
• Evite la duplicación: por supuesto, como una respuesta válida de la pregunta, debe evitar la duplicación, y lo hace en gran medida.

Aquí se muestran las options con sus valores predeterminados

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 : []
}

Como puede ver, la mayoría de las veces, es solo chartData que cambia. Incluso si necesita establecer alguna propiedad, principalmente solo tipos verdaderos / falsos, nada como el horror que el constructor de Highchart espera (sin criticarlos, la cantidad de opciones que proporcionan es simplemente increíble desde el punto de vista de personalización, pero para cada desarrollador en el equipo para entenderlo y dominarlo puede llevar algo de tiempo)

Entonces la creación de gráficos es tan simple como

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

Answer 2

Puede usar jQuery.extend() y Highcharts.setOptions .
Entonces, primero creará el primer objeto que será extendido por todos sus gráficos, este objeto contendrá sus funciones predeterminadas de Highchart.

Puedes hacerlo usando el espacio de nombres.
La siguiente forma es buena cuando tienes gráficos muy diferentes.

Gráfico predeterminado:

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);
}
};

Ahora, si quiere hacer un gráfico de columnas, ampliará 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 tiene gráficos similares, use Highcharts.setOptions que aplicará las opciones para todos los gráficos creados después de esto.

// `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: []
});

Referencia

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

DEMO COMPLETA

Answer 3

Sé que esto ya ha sido respondido, pero creo que puede tomarse aún más. Todavía soy nuevo en JavaScript y jQuery, así que si alguien encuentra algo incorrecto, o cree que este enfoque rompe las pautas o reglas generales de algún tipo, le agradecería los comentarios.

Sobre la base de los principios descritos por Ricardo Lohmann, he creado un plugin jQuery, que (en mi opinión) permite a Highcharts trabajar de manera más uniforme con jQuery (es decir, la forma en que jQuery funciona con otros objetos HTML).

Nunca me ha gustado el hecho de que debe proporcionar una ID de objeto a Highcharts antes de que dibuje el gráfico. Entonces, con el complemento, puedo asignar el gráfico al objeto selector jQuery estándar, sin tener que dar al contenido <div> un valor de 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);

Con este complemento, ahora puedo asignar un gráfico de la siguiente manera:

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

Este es un ejemplo simplista, por supuesto; para un ejemplo real, tendría que crear propiedades de gráfico más complejas. Pero son los principios que nos preocupan aquí, y creo que este enfoque aborda la pregunta original. Reutiliza el código, al tiempo que permite que las alteraciones de los gráficos individuales se apliquen progresivamente una encima de la otra.

En principio, también le permite agrupar varias llamadas Ajax en una sola, empujando las opciones y los datos de cada gráfico en una única matriz de JavaScript.

El ejemplo obligatorio de JFiddle está aquí: http://jsfiddle.net/3GYHg/1/

¡Crítica bienvenida!