Configuración avanzada de informes gráficos

Puedes personalizar elementos del aspecto de un gráfico de informe utilizando el campo de configuración Avanzada, por ejemplo:

• Cambiar el gráfico y los títulos de los ejes
• Cambiar el tamaño, el color y el estilo de la fuente
• Modificar la posición y el estilo de la leyenda

A partir de Totara 13, el campo de configuración avanzada para los informes gráficos de Totara está escrito en formato JSON para especificar la configuración personalizada que funcionará en todas las bibliotecas de gráficos. Estos ajustes no son específicos de una biblioteca de gráficos y funcionarán cuando se utilicen gráficos ChartJS y SVGGraph.

Configuración del título

Ejemplo

{
        "title": "Example Graph Title"
}

OR

{
        "title": {
               "text": "Example Graph Title",
                "position": "top",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "#fff",
                "padding": 5
        }
}

Ajustes de leyenda

Ejemplo

{
        "legend": {
                "display": true,
                "position": "left",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "fff",
                "padding": 5
        }
}

Ajustes de información sobre herramientas

Ejemplo

{
        "tooltips": {
                "display": true,
                "backgroundColor": "#ddd",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "#fff",
                "borderRadius": 5,
                "borderColor": "#0a7b92",
                "borderWidth": 3
        }
}

Ajustes del eje

Los ajustes del eje deben aplicarse al eje x o al eje y. Los ajustes disponibles para cada eje son idénticos.

Ejemplo

{
        "axis": {
               "x": {
                       "display": true,
                       "max": "April",
                       "title": {
                               "text": "Horizontal Axis Label",
                               "font": "Times New Roman",
                               "fontSize": 22,
                               "fontStyle": "bold",
                               "color": "#fff000",
                               "padding": 10
                       },

                       "grid": {
                               "display": true,
                               "color": "#fff000"
                       }
               },

               "y": {
                       "display": true,
                       "title": {
                               "text": "Vertical Axis Label",
                               "font": "Times New Roman",
                               "fontSize": 22,
                               "fontStyle": "bold",
                               "color": "#f0f0ff",
                               "padding": 10
                       },

                       "grid": {
                               "display": true,
                               "color": "#3a4f3a"
                       }
               }
        }
}

Configuraciones de color del gráfico

Puedes especificar los colores de los gráficos con ChartJS y SVGGraph.

Ejemplos:

Los colores por defecto utilizados para el contenido del gráfico se muestran aquí:

{"colors" : [
"#3869B1",
"#DA7E31",
"#3F9852",
"#CC2428",
"#958C3D",
"#6B4C9A",
"#8C8C8C"
]}

Puedes delinear tantos colores como necesites de la siguiente manera:

{"colors": ["#ff0000", "#00ff00", "#0000ff"]}

A partir de Totara 17.28 es posible especificar los colores que se asociarán con conjuntos de datos específicos usando ChartJS y SVGGraph.

{
  "categoryColors": {
    "item1": "#ff0000",
    "item2": "#00ff00"
  }
}

Puedes describir tantas categorías nombradas como necesites de esta manera. Si algún conjunto de datos no coincide con una categoría nombrada, se utilizarán los colores regulares anteriores.

Si tu gráfico admite multi-lenguaje, deberás definir un color para cada traducción.

Ajustes de dona de progreso

Ejemplo 1

{
"colors" : ["red", "yellow", "green"],
"colorRanges": [20, 100],
"type" : {
  "progress": {
    "totalsSupplied": true,
    "percentageValues": true
  }
}
}

Ejemplo 2

{
"colors" : ["red", "yellow", "green"],
"colorRanges": [20, 100],
"type" : {
    "progress": {
    "totalsSupplied": true,
    "percentageValues": false
  }
}
}

Ejemplo 3

{"colors" : ["green"],
"type" : {
    "progress": {
    "totalsSupplied": true,
    "backgroundColor": "red"
  }
}
}

Ajustes del conjunto de datos

Ejemplo

{
    "data-settings": {
         "0": {
             "fill": true,
             "borderDash":[15,5],
             "backgroundColor": "#CCFFCC"
          }
     }
}

Ajustes específicos de la biblioteca

Si deseas escribir ajustes más avanzados para aprovechar algunas de las capacidades extendidas de tu biblioteca de gráficos, puedes usar el campo de ajustes "personalizados" para pasar los ajustes directamente a la biblioteca. Estos no serán compatibles entre sí.

Documentación oficial para SVGGraph

Documentación oficial para ChartJS

Ejemplo de SVGGraph

{
        "custom": {
              "legend_columns": 3,
              "legend_title_font_weight": "italic",
              "legend_draggable": false
        }
}

Ejemplo de ChartJS

{
        "custom": {
               "axis": {
                       "scales": {
                               "yAxes": [{
                                       "gridLines": {
                                              "display": false
                                      }
                               }]
                       }
               }
        }
}

Ejemplo completo

{
        "title": {
                "text": "Graph Title",
                "position": "top",
                "font": "Times New Roman",
                "fontSize": 22,
                "fontStyle": "bold",
                "color": "#ea22a9",
                "padding": 10
        },

        "legend": {
                "display": "true",
                "position": "top",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "italic",
                "color": "#ee22a9",
                "padding": 5
        },

        "tooltips": {
                "display": true,
                "backgroundColor": "#eaeaea",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "#1f1f1f",
                "borderRadius": 5,
                "borderColor": "#ee22a9",
                "borderWidth": 1
        },

        "axis": {
               "x": {
                       "display": false,
                       "title": {
                               "text": "Horizontal Axis",
                               "font": "Times New Roman",
                               "fontSize": 16,
                               "fontStyle": "italic",
                               "color": "#ea22a9",
                               "padding": 10
                               "max": "April",
                       },

                       "grid": {
                               "display": true,
                               "color": "#eaeaea"
                       }
               },

               "y": {
                       "display": false,
                       "title": {
                               "text": "Vertical Axis",
                               "font": "Times New Roman",
                               "fontSize": 16,
                               "fontStyle": "italic",
                               "color": "#ea22a9",
                               "padding": 10
                       },

                       "grid": {
                               "display": true,
                               "color": "#eaeaea"
                       }
               }
        }
}