Ich habe ein seltsames Problem mit dem Anzeigen von Daten auf einer xAxis. Ich erzeuge Daten wie folgt:
%Vor%In meinem lineChart möchte ich die X-Achse wie folgt erstellen:
%Vor%Wenn ich mir nun das Diagramm ansehe, sind nur ein paar Daten sichtbar. Aus diesem Grund habe ich das Array "testarr" für Degugging-Probleme erstellt. Der Inhalt von testarr ist 8 Termine statt 12 (ich habe 12 generiert)
Nun das noch merkwürdigere: Wenn man die exakt gleichen Daten in ein MultiBarChart einfügt und die EXACT-Funktion chart.xAxis .... verwendet, sind die Testarrays 12 Werte
Ich bin sprachlos und hoffe, dass mir jemand helfen kann.
Danke Jungs!
Kompletter Code unten:
für lineChart: lineChart Ergebnis
%Vor%wenn ich das
nicht ausdepretiere %Vor%Abschnitt, die Achse zeigt Jan70 überall.
Für den MultiBarChart-Code: MultiBar-Ergebnis
%Vor%Liniendiagramm-Achsen, wie alle linearen Achsen, verwenden Teilstriche, um Schlüsselpunkte auf der Linie zu zeigen, aber nicht jeden erdenklichen Wert. In vielen Fällen würden die Ticks, wenn das Diagramm alle Daten zeigt, so nahe beieinander liegen, dass sich die Labels überschneiden und unlesbar werden. Von Personen wird erwartet, dass sie die Position auf der Linie basierend auf der Entfernung zu benachbarten Teilstrichen schätzen können.
Im Gegensatz dazu wird angenommen, dass die x-Werte für das Balkendiagramm verschiedene Kategorien sind, die möglicherweise keine natürliche Reihenfolge haben. Sie könnten "Äpfel", "Orangen" und "Bananen" sein. Es gibt keine Möglichkeit, einen mittleren Wert ("Orangen") basierend auf den Werten benachbarter Etiketten ("Äpfel" und "Bananen") zu schätzen, daher werden standardmäßig alle Etiketten angezeigt, auch wenn sie sich überlappen und nicht lesbar sind. p>
Aber was ist mit Ihrem Liniendiagramm, in dem Sie nur 12 Datumswerte haben, damit Sie Platz für alle Etiketten ohne Überlappung haben? Die reguläre d3-Methode, um der Achse mitzuteilen, wie viele Ticks sie enthalten soll, ist axis.ticks() . Ich sehe, dass Sie versucht haben, etwas Ähnliches zu tun, aber die axis.tickSize() -Methode steuert die Länge jeder Tick-Linie, nicht wie viele es gibt. % Co_de% funktioniert jedoch nicht mit NVD3 - die internen Methoden überschreiben alle Werte, die Sie auf der Achse festlegen.
Keine Sorge, es gibt noch einen Weg, es zu kontrollieren, aber es erfordert etwas zusätzlichen Code. Die Methode axis.ticks() ersetzt axis.tickValues() , so dass Sie sie verwenden können, um Fahre mit dem NVD3 Standard.
Die Information, die Sie in axis.ticks() einfügen, ist ein Array mit expliziten Werten für jeden Tick. Da Ihre x-Achsenwerte Datumsangaben sind und Sie für jeden Monat einen Wert haben, haben Sie zwei Möglichkeiten, dieses Array zu erstellen:
Option 1: Ermitteln Sie die x-Werte direkt aus Ihren Daten.
%Vor%Option 2: Verwenden Sie ein d3 Zeitintervall Methode, um eine Sequenz von Daten zu berechnen.
%Vor%Ich hoffe, dass alles jetzt Sinn macht.
Tags und Links javascript date d3.js nvd3.js
