C3: Ursprung ist nicht richtig positioniert

Erstellt am 28. Aug. 2014  ·  4Kommentare  ·  Quelle: c3js/c3

Beim Betrachten von http://c3js.org/ und http://c3js.org/gettingstarted.html ist mir aufgefallen, dass die Achsenursprünge (dh Nullpunkte) falsch positioniert sind - sie sollten sicherlich am tatsächlichen Kreuzungspunkt der Achsen liegen standardmäßig, dh sofern nicht anders angegeben?

example

question

Hilfreichster Kommentar

Dies erreichen Sie, indem Sie den Achsenabstand und den Diagrammbereich einstellen.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data1: 'y',
            data2: 'y2'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0
        }
    }
});

JS-Geige: http://jsfiddle.net/santazhang/gswhaLu0/1/

Alle 4 Kommentare

Dies erreichen Sie, indem Sie den Achsenabstand und den Diagrammbereich einstellen.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data1: 'y',
            data2: 'y2'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0
        }
    }
});

JS-Geige: http://jsfiddle.net/santazhang/gswhaLu0/1/

Danke, das löst das Problem teilweise, aber...

  • In der JSFiddle, die Sie so freundlicherweise zur Verfügung gestellt haben, erscheint der erste Datenpunkt teilweise durch die Y-Achse verdeckt, was nicht richtig ist - er sollte oben, nicht unten gezeichnet und abgeschnitten werden
  • Bei IS-Auffüllung (wie in meinem Beispielbild) kreuzen sich die beiden Linien und gehen übereinander, was keinen Sinn macht, da es nicht der Ursprung ist ... wie können die Achsen so konfiguriert werden, dass die Linien bei enden? den Punkt, an dem sie sich berühren, anstatt übereinander hinwegzugehen?
  • C3-Standardeinstellungen sind sehr seltsame/ungewöhnliche Einstellungen, die zu unorthodoxen Graphen führen, deren Funktionen nicht mit gewöhnlichen / realen Graphen übereinstimmen ... warum? Warum nicht die traditionellen Einstellungen verwenden, nach denen ich frage, was die meisten Leute erwarten werden?

Hi,

  • c3 legt den Ursprung nicht auf 0 fest, da der Ursprung nicht immer 0 ist. Ich meine, wenn der Datenbereich 100 bis 500 beträgt, möchten wir uns auf den Bereich von etwa 80 bis 520 konzentrieren.
  • Wie Sie sagen, scheint es natürlich zu sein, aber jetzt ist es aufgrund der Spezifikation von SVG und der Implementierung von c3 schwierig, den ersten Datenpunkt anzuzeigen, während Sie schreiben. Aber ich denke, es ist akzeptabel und eine Art Kompromiss. Haben Sie eine Idee, dies zu beheben?
  • Tut mir leid, ich bin mir nicht sicher, was Sie meinen, aber wenn Sie das Häkchen unten und oben auf der Achse meinen, ist es d3-Weg. Es ist jedoch möglich, es mit axis.x.tick.outer = false und axis.y.tick.outer = false auszublenden, wenn Sie möchten.
  • Wie gesagt, die Standardeinstellungen sind wichtig. Ich werde bei Bedarf entsprechend den Anforderungen aktualisieren.

Bitte lassen Sie mich schließen.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Shugardude picture Shugardude  ·  4Kommentare

alantygel picture alantygel  ·  3Kommentare

patternboxtech picture patternboxtech  ·  4Kommentare

udhaya2kmrv picture udhaya2kmrv  ·  3Kommentare

wojciechowskid picture wojciechowskid  ·  3Kommentare