Publicado en Javascript

Cambiar el color de los Labels en Morris Chart

Usando el template Concept, al momento de usar los gráficos Morris de linea, me di cuenta que al agregar mas lineas el color de los labels no cambiaba y se repetian solos tres colores.

Al codigo original le agregue una tercera linea (“Serie C”) con color morado. Aqui esta el codigo:

Codigo del archivo Morrisjs.js

if ($('#morris_line').length) {
            // Use Morris.Area instead of Morris.Line
            Morris.Line({
                element: 'morris_line',
                behaveLikeLine: true,
                data: [
                    { y: '2006', a: 10, b: 20  , c: 11},
                    { y: '2007', a: 65, b: 45  , c: 22},
                    { y: '2008', a: 50, b: 40  , c: 33},
                    { y: '2009', a: 75, b: 65  , c: 44},
                    { y: '2010', a: 50, b: 40  , c: 55},
                    { y: '2011', a: 75, b: 65  , c: 66},
                    { y: '2012', a: 100, b: 90 , c: 77}
                ],

                xkey: 'y',
                ykeys: ['a', 'b', 'c'],
                labels: ['Series A', 'Series B', 'Series C'],
                   lineColors: ['#5969ff', '#ff407b', '#9440ed'],
                     resize: true,
                        gridTextSize: '14px'
            });

        }

Pero el grafico con los labels generados se ve asi:

En la imagen anterior se ven que las lineas gráficas son de color distintas a los que aparecen en los labels. Y esto se debe al codigo por defecto que trae el archivo morri.js

Linea 838:

    Line.prototype.defaults = {
      lineWidth: 3,
      pointSize: 4,
      lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
      pointStrokeWidths: [1],
      pointStrokeColors: ['#ffffff'],
      pointFillColors: [],
      smooth: true,
      shown: true,
      xLabels: 'auto',
      xLabelFormat: null,
      xLabelMargin: 24,
      hideHover: false,
      trendLine: false,
      trendLineWidth: 2,
      trendLineColors: ['#5969ff', '#a2b3bf', '#64b764']
    };

La propiedad trendLineColors tiene pre-definido los 3 colores que se ven en la imagen anterior: azul, gris y verde.

Aqui es donde hacemos el cambio y reemplazamos esos colores por los que pusimos en la generación de los datos:

.
.
.
trendLineColors: ['#5969ff', '#ff407b', '#9440ed']

Y ahora si se ven los colores concordantes entre las lineas y los labels:

Y liz taylor!!! con esto ya podemos modificar a gusto los colores de este gráfico de lineas (solo probé con este tipo, los otros de barras y torta se los dejo a Uds contertulios).

Nos vemos hasta el próximo tutorial.

TYDW.-

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s