Avancerade inställningar för grafisk rapportering

Du kan anpassa elementen i ett rapportsdiagram utseende och känsla med hjälp av fältet Avancerade inställningar, t.ex.:

• Ändra diagram- och axeltitlar
• Ändra teckenstorlek, färg och stil
• Ändra legendens position och stil

Från och med Totara 13 skrivs fältet för avancerade inställningar för Totara grafiska rapporter i JSON-format för att specificera anpassade inställningar som kommer att fungera med alla diagrambibliotek. Dessa inställningar är inte specifika för ett diagrambibliotek och fungerar när man använder både ChartJS och SVGGraph diagram.

Titelinställningar

Exempel

{
        "title": "Example Graph Title"
}

OR

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

Inställningar för legendan

Exempel

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

Verktygstipsinställningar

Exempel

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

Axelinställningar

Axelinställningar måste tillämpas på antingen x- eller y-axeln. Inställningarna som finns tillgängliga för varje axel är identiska.

Exempel

{
        "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"
                       }
               }
        }
}

Grafens färginställningar

Du kan specificera graffärger med både ChartJS och SVGGraph.

Exempel

Standardfärger som används för att illustrera grafinnehåll visas här:

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

Du kan specificera så många färger du behöver på följande sätt:

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

Från och med Totara 17.28 är det möjligt att ange färger som ska associeras med specifika dataset med både ChartJS och SVGGraph.

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

Du kan specificera så många namngivna kategorier du behöver på det här sättet. Om något dataset inte matchar en namngiven kategori kommer de vanliga färgerna ovan att användas istället.

Om ditt diagram stöder flera språk måste du definiera en färg för varje översättning.

Inställningar för progressionsdonut

Exempel 1

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

Exempel 2

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

Exempel 3

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

Dataset-inställningar

Exempel

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

Biblioteksspecifika inställningar

Om du vill skriva mer avancerade inställningar för att dra nytta av några av de utökade möjligheterna i ditt diagrambibliotek, kan du använda fältet "custom" för att skicka inställningar direkt till biblioteket. Dessa kommer inte att vara kompatibla korsvis.

Officiell dokumentation för SVGGraph

Officiell dokumentation för ChartJS

Exempel på SVGGraph

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

Exempel på ChartJS

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

Fullständigt exempel

{
        "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"
                       }
               }
        }
}