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



Answers

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!

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?