Chart.js-Achsen-Schriftgröße der Beschriftung

Lesezeit: 2 Minuten

Wie kann ich in chart.js die Schriftgröße nur für die Beschriftungen der x-Achse festlegen, ohne die globale Konfiguration zu berühren?

Ich habe bereits versucht, die Option ‘scaleFontSize’ in meinem Optionsobjekt festzulegen. Ich habe auch versucht, die Einstellung:

{
  ...
  scales: {
    xAxes: [{
      scaleFontSize: 40
      ...
    }]
   }
}

  • stackoverflow.com/a/48580585/7186739

    – Billu

    2. Februar 2018 um 10:24 Uhr

  • Der Titel sollte geändert werden, da sich die Frage und die Antworten auf die Achsenbeschriftungen und nicht auf die eigentliche Achsenbeschriftung konzentrieren, was verwirrend ist, wenn Sie die Schriftgröße der Achsenbeschriftung ändern möchten.

    – Kleiner Geek

    14. Juni 2019 um 7:58 Uhr


Benutzeravatar von tektiv
tektiv

Die fontSize Attribut ist eigentlich drin scales.xAxes.ticks und nicht drin scales.xAxes wie du dachtest.

Sie müssen also nur das Attribut wie folgt bearbeiten:

var options = {
    scales: {
        yAxes: [{
            ticks: {
                fontSize: 40
            }
        }]
    }
}


Sie sehen ein voll funktionsfähiges Beispiel in diesem jsFiddle und hier ist sein Ergebnis:

Geben Sie hier die Bildbeschreibung ein

  • Ja, aber wie setze ich die Schriftgröße für das Radardiagramm, wo nein x und y Achsen ?

    – Yevhenii Shashkov

    2. März 2017 um 11:25 Uhr

  • Sie haben in Ihrer Erklärung auf die xAxes-Ticks verwiesen, aber die yAxes-Ticks in jsFiddle auf 40 gesetzt.

    – cjmcdonn

    31. August 2017 um 14:23 Uhr

  • Wie kann ich die Schriftgröße des Titels und des Labels einstellen?

    – Luciana Oliveira

    7. April 2021 um 21:30 Uhr

  • Dies funktioniert in Geige, aber nicht in meinem Code.

    – Muhammad Ahsan

    20. April 2022 um 17:53 Uhr

Konfigurationsoptionen und Eigenschaften für chartjs 3.0 haben sich geändert. Derzeit verwende ich Chartjs 3.1.1. Schriftarten werden jetzt als Objekte verwendet. Um die Schriftgröße der Ticks der x-Achse zu ändern, müssen Sie die folgende Konfiguration verwenden.

var options = {
    scales: {
        x: {
            ticks: {
                font: {
                    size: 12,
                }
            }
        }
    }
};

Schau dir das an jsfiddle Probe.

  • Endlich! Ich habe überall gesucht und die meisten anderen Antworten sind veraltet!

    – ThePhi

    8. Juni 2021 um 12:54 Uhr


  • Hier ist der Doc-Link: chartjs.org/docs/master/general/fonts.html

    – Relisora

    1. Oktober 2021 um 17:41 Uhr

Versuchen Sie, das funktioniert

     options: {
        scales: {
           xAxes: [{
                   ticks: {
                    fontSize: 10
                   }
                  }]
                }
             }

options: {
                  locale: 'fa-IR',
                  responsive: true, // Instruct chart js to respond nicely.
                  maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
                        plugins: {
                          legend: {
                              position: 'top',
                              labels: {
                                  font: {
                                    size: 9,
                                    family:'vazir'
                                  }
                             }
                          },
                          title: {
                            display: true,
                            text: chart_info.chartTitle,
                            font: {
                                size: 16,
                                family:'vazir'
                            }
                          },
                          tooltip: {
                              bodyFont: {
                                size: 13,
                                family:'vazir'
                              }
                         }
                    },
                    scales: {
                        x: {
                            ticks: {
                                font: {
                                    size: 10,
                                    family:'vazir'
                                }
                            }
                        },
                        y: {
                            ticks: {
                                font: {
                                    size: 10,
                                    family:'vazir'
                                }
                            }
                        }                       
                    }
                }

Probieren Sie aus, ob dies funktioniert

{
  ...
  scales: {
    xAxes: [{
      fontSize: 40
      ...
    }]
   }
}

Es sieht nicht danach aus scaleFontSize ist eine gültige Eigenschaft.

  • Überraschenderweise arbeitet für die scaleLabel was schlecht dokumentiert ist.

    – davidkonrad

    28. November 2016 um 3:54 Uhr

Benutzeravatar von Usama Fayyaz
Usama Fayyaz

Versuche dies

Chart.defaults.global.defaultFontSize = 8;

  • Überraschenderweise arbeitet für die scaleLabel was schlecht dokumentiert ist.

    – davidkonrad

    28. November 2016 um 3:54 Uhr

Benutzeravatar von Abdul Hameed
Abdul Hamed

Versuchen Sie diese einfache Lösung:

myChart.options.scales.yAxes[0].ticks.fontSize = 40 ;

myChart.update();

1438510cookie-checkChart.js-Achsen-Schriftgröße der Beschriftung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy