Kann ich die Schriftart von c3js-Diagrammen vergrößern, z. B. in Achsenbeschriftungen, Datenbeschriftungen oder Kategorien? Ich bin daran interessiert, die allgemeine Schriftart auf eine größere zu setzen.c3js: Gibt es eine Möglichkeit, die Schriftgröße zu ändern?
Ich suchte die Dokumente und konnte nichts finden, was mit "Schriftart" in irgendeiner Weise zusammenhing.
C3 geben Sie bei der Generierung einige Klassen für jedes Element an. Sie können also den Stil der Elemente ändern, indem Sie diese Klassen mit CSS verwenden.
Beispiel: 1. Linienstil Die Linien haben c3-line-[id] Klasse, so dass diese Klasse verwendet werden kann, um den Stil in CSS zu definieren.
Ein Web Inspector wäre nützlich, um Klassen zu überprüfen.
In Ihrem Fall Etiketten sind:
c3-legend-item-eventtickVon C3js Dokumentation: http://c3js.org/gettingstarted.html
Ich habe versucht, mit CSS zu stylen, aber wenn ich die Schriftgröße über eine bestimmte Grenze hinaus vergrößere, wird der Text aufgrund der begrenzten Breite des übergeordneten Containers ausgeblendet. Gibt es eine flexiblere Möglichkeit, die Schriftgröße von Achsenbeschriftungen oder Legenden anzupassen? Gibt es auch eine Möglichkeit, Zeilenumbrüche in Labels hinzuzufügen? Ich möchte Etiketten nach einem bestimmten Wort brechen. Jede Art von Hilfe würde wirklich geschätzt werden. –
ich um ein wenig zu suchen hatte außerdem und lesen Sie die c3.css-Datei, um ein gutes Verständnis von zu bekommen Wie ändere ich das Standard-Aussehen?
Aus der Spitze meines Kopfes hier einige Klassen, die Sie das Layout ändern möchten, stellen Sie sicher, Ihre eigene CSS-Datei nach c3.css enthalten, um es zu überschreiben.
.c3-legend-item
.c3-tooltip th
.c3-tooltip td
Die CodePen unten enthält die meisten anderen CSS-Klassen, die Sie benötigen, um Ihre C3-Chart nach Ihren Wünschen anpassen. Es ist ein Balkendiagramm/Liniendiagramm Hybrid, aber auf Kuchen und Donut-Charts getestet, so dass die Klassen die gleichen sind.
C3.js Chart: CodePen
Verwenden Sie die folgenden zwei Klassen.
.c3-axis-y text
{
font-size: 15px; //change the size of the fonts
}
.c3-axis-x text
{
font-size: 15px; //change the size of the fonts
}
Für eine y-Achse auf der Verwendung der rechten Seite - .c3-axis-y2 text
Einfach
table.c3-tooltip{
font-size:150px;
} here
ändern die Schriftgröße für Sie entsprechend
hat die vorgeschlagene Lösung? – aberna